use-media-query

Usage

use-media-query subscribes to media queries. It receives a media query as an argument and returns true if the given media query matches the current state. The hook relies on window.matchMedia() API and will return false if the API is not available, unless an 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: 56.25em)');

  return (
    <Badge color={matches ? 'teal' : 'red'} variant="filled">
      Breakpoint {matches ? 'matches' : 'does not match'}
    </Badge>
  );
}

Server Side Rendering

During server side rendering the hook will always return false as window.matchMedia api is not available, if that is not a desired behavior, you can override the 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,
  });
}

UseMediaQueryOptions type

@mantine/hooks package exports UseMediaQueryOptions type – a type of the second argument of useMediaQuery hook.

import { useMediaQuery, UseMediaQueryOptions } from '@mantine/hooks';

const options: UseMediaQueryOptions = {
  getInitialValueInEffect: false,
};

const matches = useMediaQuery('(max-width: 40em)', true, options);

Definition

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