use-media-query

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:

import { Badge } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';

function Demo() {
  const matches = useMediaQuery('(min-width: 900px)');

  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: 700px)', true, { getInitialValueInEffect: false });
}

Definition

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