import { useMediaQuery } from '@uhg-abyss/web/hooks/useMediaQuery';

Usage

The useMediaQuery hook leverages the 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:

Server side rendering

If you are using server side rendering the useMediaQuery hook will always return false as the window.matchMedia api is not available. To overcome this, you can override the initial value.

const matches = useMediaQuery('(max-width: 700px)', true, {
  getInitialValueInEffect: false,
});

Properties

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