useMediaQuery

useMediaQuery(query, options?): boolean

Defined in: src/hooks/useMediaQuery/useMediaQuery.ts:31

Reactive media query matching.

Returns true when the current viewport matches the query and updates as the viewport changes. SSR-safe — returns defaultMatches when matchMedia is unavailable. Uses the modern addEventListener('change') API with a fallback to the legacy addListener for older browsers.

Parameters

query

string

options?

UseMediaQueryOptions = {}

Returns

boolean

Example

const isWide = useMediaQuery('(min-width: 768px)');
return isWide ? <DesktopLayout /> : <MobileLayout />;