use_match_media.js

function useMatchMedia(query) {
  const mediaQuery = useMemo(() => window.matchMedia(query), [ query ]);
  const [ matches, setMatches ] = useState(mediaQuery.matches);

  useEffect(() => {
    function onChange({ matches: newMatches }) {
      setMatches(newMatches);
    }

    if (mediaQuery.addEventListener)
      mediaQuery.addEventListener('change', onChange);
    else
      mediaQuery.addListener(onChange);

    return () => {
      if (mediaQuery.removeEventListener)
        mediaQuery.removeEventListener('change', onChange);
      else
        mediaQuery.removeListener(onChange);
    };
  }, [ mediaQuery ]);

  return matches;
}