useMediaQuery

Track the matchMedia changes of a media query using this hook.

Parameters

the media query string.

Return Values

It returns a boolean, which indicates whether the query has matched or not.

Example Usage

tsx

import { useMediaQuery } from 'react-pre-hooks';

export default function Example() {
  const matches = useMediaQuery('(prefers-color-scheme: dark)');

  const colorScheme = matches ? 'dark' : 'light';

  return (
    <main style={{ colorScheme }}>
      <p>
        System color scheme is <span>{colorScheme}</span>.
      </p>
    </main>
  );
}

import { useMediaQuery } from 'react-pre-hooks';

export default function Example() {
  const matches = useMediaQuery('(prefers-color-scheme: dark)');

  const colorScheme = matches ? 'dark' : 'light';

  return (
    <main style={{ colorScheme }}>
      <p>
        System color scheme is <span>{colorScheme}</span>.
      </p>
    </main>
  );
}