useMedia - React hook for `window.matchMedia` for matching media-query

useMedia-hook.js

function useMedia(mediaQuery) {
  const match = () => {
    if (!window.matchMedia) {
      return false;
    }
    return window.matchMedia(mediaQuery).matches;
  };

  const [value, set] = useState(match);

  useEffect(() => {
    // Update state on window `resize` event.
    // Usage of `match` function defined outside of `useEffect`
    // ensures that it has current values of arguments.
    const handler = () => set(match);
    window.addEventListener('resize', handler);
    // Remove event listener on cleanup.
    return () => window.removeEventListener('resize', handler);
  });

  return value;
}