Skip to content

Is Mobile

hookresponsivemedia-query

Responsive media-query hook that returns true below a breakpoint. It uses useSyncExternalStore so server and client snapshots stay predictable.

tsx
const isMobile = useIsMobile();return isMobile ? <MobileNav /> : <DesktopNav />;

Installation

$pnpm exec dgadd add ui/is-mobile
[Installs to]src/hooks/use-is-mobile.ts[Item]ui/is-mobile

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Parameters

NameTypeDefaultDescription
breakpointnumber1024Pixel breakpoint. The hook matches max-width: breakpoint - 1px, so the default is mobile below 1024px.
ownerWindow | RefObject<Element | null>—Window or element ref whose owner window supplies matchMedia. Pass it when rendering into an iframe or another document.

Returns

booleanTrue when the viewport is narrower than the breakpoint; false during server rendering.

Notes

Server Snapshot

Server rendering returns false. Use this hook for responsive enhancement after hydration, not for markup that must be identical across breakpoints before hydration.

Media Query

The subscribed query is (max-width: breakpoint - 1px). With the default 1024 breakpoint, 1023px and below return true.

Owner Window

By default the hook uses the current global window. Pass a Window or an element ref to classify and subscribe against another document's viewport.

Source

Highlighted source loads after this disclosure opens. Browse the source repository.