Reactberry

useStandaloneMode

Detect whether the app is running as an installed progressive web app.

useStandaloneMode returns true when the app runs in standalone mode, that is, installed as a progressive web app (PWA) and opened from the home screen or app launcher.

useStandaloneMode() → falseRunning in a browser tab.

Import#

typescript
import { useStandaloneMode } from "@reactberry/system";

Usage#

typescript
"use client";

import { useStandaloneMode } from "@reactberry/system";
import { Box } from "@reactberry/system/elements";

export default function AppHeader({ children }: { children: React.ReactNode }) {
  const isStandalone = useStandaloneMode();

  return <Box pt={isStandalone ? "env(safe-area-inset-top)" : "0"}>{children}</Box>;
}

API#

typescript
function useStandaloneMode(): boolean

Parameters#

None.

Returns#

PropTypeDefaultDescription
isStandalone
boolean
—

true when the app runs in standalone mode.

Notes#

  • Checks the (display-mode: standalone) media query (Chrome, Edge, Firefox) and navigator.standalone (Safari on iOS), and updates when the media query changes.
  • Returns false during server rendering and on the first client render, then updates after mount.
  • useOverlay uses this hook for its isStandalone value.