init

src/hooks/useMediaQueries.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+
+function readBreakpoints(lg: number, md: number, sm: number) {
+  if (typeof window === "undefined" || typeof window.matchMedia === "undefined") {
+    return {
+      isLg: false,
+      isMd: false,
+      isSm: false,
+      isXs: false,
+    };
+  }
+
+  const lgMedia = matchMedia(`(min-width: ${lg}px)`);
+  const mdMedia = matchMedia(
+    `(max-width: ${lg - 1}px) and (min-width: ${md}px)`
+  );
+  const smMedia = matchMedia(
+    `(max-width: ${md - 1}px) and (min-width: ${sm}px)`
+  );
+  const xsMedia = matchMedia(`(max-width: ${sm - 1}px)`);
+
+  return {
+    isLg: lgMedia.matches,
+    isMd: mdMedia.matches,
+    isSm: smMedia.matches,
+    isXs: xsMedia.matches,
+  };
+}
+
+export function useMediaQueries(lg = 1440, md = 768, sm = 640) {
+  const [state, setState] = useState(() => readBreakpoints(lg, md, sm));
+
+  useEffect(() => {
+    const lgMedia = matchMedia(`(min-width: ${lg}px)`);
+    const mdMedia = matchMedia(
+      `(max-width: ${lg - 1}px) and (min-width: ${md}px)`
+    );
+    const smMedia = matchMedia(
+      `(max-width: ${md - 1}px) and (min-width: ${sm}px)`
+    );
+    const xsMedia = matchMedia(`(max-width: ${sm - 1}px)`);
+
+    const sync = () => setState(readBreakpoints(lg, md, sm));
+
+    lgMedia.addEventListener("change", sync);
+    mdMedia.addEventListener("change", sync);
+    smMedia.addEventListener("change", sync);
+    xsMedia.addEventListener("change", sync);
+
+    sync();
+
+    return () => {
+      lgMedia.removeEventListener("change", sync);
+      mdMedia.removeEventListener("change", sync);
+      smMedia.removeEventListener("change", sync);
+      xsMedia.removeEventListener("change", sync);
+    };
+  }, [lg, md, sm]);
+
+  return {
+    isLg: state.isLg,
+    isMd: state.isMd,
+    isSm: state.isSm,
+    isXs: state.isXs,
+  };
+}