useMediaQuery#

Reactive matchMedia — a media query string as a boolean signal. Browser composable — import from @sigx/use-web.

TypeScript 
import { useMediaQuery } from '@sigx/use-web';

const isWide = useMediaQuery('(min-width: 1024px)');
const reduced = useMediaQuery('(prefers-reduced-motion: reduce)');

The query is a MaybeSignal<string>: pass a reactive query and it re-subscribes when the string changes. The change listener detaches with the owning scope. The result is a ReadSignal<boolean>.

Signature#

TypeScript 
function useMediaQuery(query: MaybeSignal<string>, options?: ConfigurableWindow): ReadSignal<boolean>;

Pass { window } to drive the query from a different document or a mock — see Configurable* overrides.

SSR#

On the server the signal reads false and never subscribes; the real match is read on mount.

See also#

  • useBreakpoints — named breakpoints built on top of this.
  • useWindowSize — the raw dimensions when you need the number, not a threshold.
  • useColorScheme — the prefers-color-scheme query as a typed contract.