useMediaQuery

useMediaQuery tracks whether a media query currently matches, updating live as it changes. For a component that should respond to its own allocated space rather than the viewport, use useContainerQuery instead.

import { useMediaQuery } from '@42/ui-react';

const isMobile = useMediaQuery('(width < 768px)');

SSR-safe via useSyncExternalStore: the hydration snapshot is always false, since a server can't know the visitor's viewport — the real match state is read in on the client shortly after mount.

Usage

Resize your browser window — the reported state tracks the real viewport width.

const isNarrow = useMediaQuery('(width < 640px)');<p>{isNarrow ? 'Matches (< 640px)' : 'Does not match (≥ 640px)'}</p>

API

Returns a boolean — true while the query matches.