useMediaQuery

Track whether a CSS media query matches.

const matches = useMediaQuery('(min-width: 1024px)')

Returns true while the media query matches and updates when it changes (resizing the window, rotating the device, switching the system theme or a motion preference). It is false on the server and where matchMedia does not exist. Use it to render something different, not for styling that CSS can do with a breakpoint.

  • Wide screen (768px or more) (min-width: 768px)No
  • System theme is dark (prefers-color-scheme: dark)No
  • Reduced motion requested (prefers-reduced-motion: reduce)No

API

Parameters

  • querystring

    A CSS media query, for example (min-width: 768px).

Returns

  • matchesboolean

    Whether the query matches right now.