useMediaQuery

useMediaQuery is a react hook that makes testing for media query matches in your code easier and simpler.

Date: 2021-10-23

Code

useMediaQuery.js
import { useState, useEffect } from 'react';

export const useMediaQuery = query => {
  const [state, setState] = useState(false);

  useEffect(
    () => {
      let mounted = true;

      // Returns a MediaQueryList object
      const mql = window.matchMedia(query);
      const onChange = () => {
        if (!mounted) return;
        setState(!!mql.matches);
      };

      mql.addListener(onChange);
      setState(mql.matches);

      // clean up
      return () => {
        mounted = false;
        mql.removeListener(onChange);
      };
    },
    [query]
  );

  return state;
};

Context

If you have a special case, when you need to get media query result inside you react app (for example, you want to show different components on mobile and desktop) this is the way to do so.

Usage

useMediaQueryExample.jsx
const EffecfulComponent = () => {
  const result = useMediaQuery(`screen and (max-width: 400px)`);
  return <span>{result.toString()}</span>;
};

const biggerThan400 = useMediaQuery(`(min-width: 400px)`);

return <div>
    {biggerThan400 && <button>SomeButton</button>}
</div>

Edit this page