Hook
useDisplayMode
useDisplayMode provides an SSR-safe view of the current PWA display mode, including the iOS standalone signal and standard display-mode media queries.
Preview
Current display mode
Install or open the site in another display mode to see this value change.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/use-display-mode.jsonUsage
"use client"
import { useDisplayMode } from "@/hooks/use-display-mode"
export function DisplayModeStatus() { const mode = useDisplayMode()
return <p>Running in {mode} mode.</p>}Returns
unknown- The server-rendered value before the browser can be inspected.
browser- The app is running in a regular browser tab.
standalone- The app is running as an installed standalone experience.
fullscreen- The app is running in fullscreen display mode.
minimal-ui- The browser is presenting minimal navigation controls.
Behavior notes
- Checks navigator.standalone for installed iOS and iPadOS web apps.
- Subscribes to display-mode media-query changes and cleans up every listener.
- Treat unknown as a real initial state rather than assuming browser during server rendering.