GitFOSS

import React from "react";
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";

const breakpoints = {
  sm: "768px",
  md: "1024px",
  lg: "1280px",
  xl: "1640px",
} as const;

type Breakpoints = keyof typeof breakpoints;

export function useMediaQuery(query: Breakpoints, type: "min" | "max" = "min") {
  const [matches, setMatches] = React.useState(false);

  useIsomorphicLayoutEffect(() => {
    const mediaQuery = window.matchMedia(
      `(${type}-width: ${breakpoints[query]})`,
    );
    setMatches(mediaQuery.matches);

    mediaQuery.addEventListener("change", (event) => {
      setMatches(event.matches);
    });

    return () =>
      mediaQuery.removeEventListener("change", (event) => {
        setMatches(event.matches);
      });
  }, [query]);

  return matches;
}