useMatchMedia.ts

import { useEffect, useState } from "react";

/**
 * @example
 *   const matches = useMatchMedia("screen and (min-width: 560px)");
 *
 * @param raw
 */
export function useMatchMedia(raw: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line no-undef
    const query = matchMedia(raw);
    setMatches(query.matches);

    const handleChange = (e: MediaQueryListEvent): void => {
      setMatches(e.matches);
    };

    // eslint-disable-next-line no-undef
    if (query instanceof EventTarget) {
      query.addEventListener("change", handleChange);
    } else {
      (query as MediaQueryList).addListener(handleChange);
    }

    return (): void => {
      // eslint-disable-next-line no-undef
      if (query instanceof EventTarget) {
        query.removeEventListener("change", handleChange);
      } else {
        (query as MediaQueryList).removeListener(handleChange);
      }
    };
  }, [raw]);

  return matches;
}