React useMediaQuery

useMediaQuery.js

/** Takes a media query and returns a boolean value for whether or not specified media query was hit.
 *  -- e.g. '(min-width: 567px)'
 */
export const useMediaQuery = (query: string): boolean => {
  const mediaMatch: MediaQueryList = window.matchMedia(query);
  const [matches, setMatches] = useState<boolean>(mediaMatch.matches);

  useEffect(() => {
    const handler = e => setMatches(e.matches);
    mediaMatch.addEventListener('change', handler);
    return () => mediaMatch.removeEventListener('change', handler);
  });

  return matches;
};