Subscribe to media queries with window.matchMedia
use-media-query hook allows to subscribe to media queries.
It receives media query as an argument and returns
true if given media query matches current state.
Hook relies on
and will return
false if api is not available unless initial value is provided in the second argument.
Resize browser window to trigger
Breakpoint does not match
Server Side Rendering
When rendering a component on the server that uses
useMediaQuery, it is important to pass the second argument
without it the server may generate html that cannot be correctly hydrated on client.
For example, the server will generate the html for clients using a smaller device. After the hydration, the hook will render again and return the result of the media query: