1
import { useCallback, useSyncExternalStore } from "react";
2
 
3
function getMatches(query: string) {
4
  return typeof window !== "undefined" && window.matchMedia(query).matches;
5
}
6
 
7
export function useMediaQuery(query: string): boolean {
8
  const subscribe = useCallback(
9
    (callback: () => void) => {
10
      if (typeof window === "undefined") return () => {};
11
 
12
      const mediaQuery = window.matchMedia(query);
13
      const handleChange = () => callback();
14
 
15
      mediaQuery.addEventListener("change", handleChange);
16
      return () => mediaQuery.removeEventListener("change", handleChange);
17
    },
18
    [query],
19
  );
20
 
21
  const getSnapshot = useCallback(() => getMatches(query), [query]);
22
 
23
  return useSyncExternalStore(subscribe, getSnapshot, () => false);
24
}