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 window.matchMedia() API and will always return false if api is not available (e.g. during server side rendering).

Hook takes media query as first argument and returns true if query is satisfied. Resize browser window to trigger window.matchMedia event:

Breakpoint does not match
import { Badge } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
export function Demo() {
const matches = useMediaQuery('(min-width: 900px)');
return (
<Badge color={matches ? 'teal' : 'red'} variant="filled">
Breakpoint {matches ? 'matches' : 'does not match'}
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback