useMediaQuery #react #hook

useMediaQuery.tsx

import React from "react";

/**
 * Matches mediaquery, rerenders only when match changes
 * @param query media query
 */
export function useMediaQuery(
  query: string | null | false,
  defValue: boolean = false,
) {
  const [matches, setMatches] = React.useState(() =>
    query ? window.matchMedia(query).matches : defValue,
  );

  React.useEffect(() => {
    if (!query) {
      return undefined;
    }

    let ignore = false;

    const mql = window.matchMedia(query);

    function onChange() {
      if (!ignore) {
        setMatches(mql.matches);
      }
    }

    mql.addListener(onChange);

    setMatches(mql.matches);

    return () => {
      ignore = true;
      mql.removeListener(onChange);
    };
  }, [query]);

  return matches;
}