React useMediaQuery hook

React, Hooks, State, Effect · Oct 13, 2021

Checks if the current environment matches a given media query and returns the appropriate value.

  • Check if Window and Window.matchMedia() exist. Return whenFalse if not (e.g. SSR environment or unsupported browser).
  • Use Window.matchMedia() to match the given query. Cast its matches property to a boolean and store in a state variable, match, using the useState() hook.
  • Use the useEffect() hook to add a listener for changes and to clean up the listeners after the hook is destroyed.
  • Return either whenTrue or whenFalse based on the value of match.
const useMediaQuery = (query, whenTrue, whenFalse) => {
  if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
    return whenFalse;

  const mediaQuery = window.matchMedia(query);
  const [match, setMatch] = React.useState(!!mediaQuery.matches);

  React.useEffect(() => {
    const handler = () => setMatch(!!mediaQuery.matches);
    mediaQuery.addListener(handler);
    return () => mediaQuery.removeListener(handler);
  }, []);

  return match ? whenTrue : whenFalse;
};
const ResponsiveText = () => {
  const text = useMediaQuery(
    '(max-width: 400px)',
    'Less than 400px wide',
    'More than 400px wide'
  );

  return <span>{text}</span>;
};

ReactDOM.render(<ResponsiveText />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this