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 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:

import React from 'react';
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'}
    </Badge>
  );
}