use-media-query

Subscribe to media queries with window.matchMedia
Import

Usage

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 return false if api is not available unless initial value is provided in the second argument.

Resize browser window to trigger window.matchMedia event:

Breakpoint does not match
import { Badge } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
function Demo() {
const matches = useMediaQuery('(min-width: 56.25em)');
return (
<Badge color={matches ? 'teal' : 'red'} variant="filled">
Breakpoint {matches ? 'matches' : 'does not match'}
</Badge>
);
}

Server Side Rendering

During server side rendering hook will always return false as window.matchMedia api is not available, if that is not a desired behavior, you can override initial value:

import { useMediaQuery } from '@mantine/hooks';
function Demo() {
// Set initial value in second argument and getInitialValueInEffect option to false
const matches = useMediaQuery('(max-width: 40em)', true, { getInitialValueInEffect: false });
}

Definition

function useMediaQuery(
query: string,
initialValue?: boolean,
options?: {
getInitialValueInEffect: boolean;
}
): boolean;