`useMediaQuery`

Returns whether the given CSS media query currently matches. Re-renders / re-runs when the match state changes. SSR-safe — returns false on the server.

Backed by useSyncExternalStore for tear-free updates.


import { useMediaQuery } from '@wire-ui/react'
 
function ResponsiveNav() {
  const isMobile = useMediaQuery('(max-width: 640px)')
  return isMobile ? <MobileNav /> : <DesktopNav />
}

Parameters

Param	Type	Description
`query`	`string`	A valid CSS media query string.

Returns

boolean — true while the media query matches.