Use Media Query

1"use client";
2 
3import { useEffect, useLayoutEffect, useState } from "react";
4 
5type UseMediaQueryOptions = {
6  defaultValue?: boolean;
7  initializeWithValue?: boolean;
8};
9 
10type MediaSize =
11  | "(max-width: 640px)" // sm
12  | "(max-width: 768px)" // md
13  | "(max-width: 1024px)" // lg
14  | "(max-width: 1280px)" // xl
15  | "(max-width: 1536px)"; // 2xl
16 
17const IS_SERVER = typeof window === "undefined";
18 
19const useIsomorphicLayoutEffect =
20  typeof window !== "undefined" ? useLayoutEffect : useEffect;
21 
22export function useMediaQuery(
23  query: MediaSize,
24  options?: UseMediaQueryOptions,
25): boolean;
26 
27export function useMediaQuery(
28  query: string,
29  options?: UseMediaQueryOptions,
30): boolean;
31 
32export function useMediaQuery(
33  query: string,
34  {
35    defaultValue = false,
36    initializeWithValue = true,
37  }: UseMediaQueryOptions = {},
38) {
39  const getMatches = (query: string) => {
40    if (IS_SERVER) {
41      return defaultValue;
42    }
43    return window.matchMedia(query).matches;
44  };
45 
46  const [matches, setMatches] = useState(() => {
47    if (initializeWithValue) {
48      return getMatches(query);
49    }
50    return defaultValue;
51  });
52 
53  const handleChange = () => {
54    setMatches(getMatches(query));
55  };
56 
57  useIsomorphicLayoutEffect(() => {
58    const matchMedia = window.matchMedia(query);
59 
60    handleChange();
61 
62    if (matchMedia.addListener) {
63      matchMedia.addListener(handleChange);
64    } else {
65      matchMedia.addEventListener("change", handleChange);
66    }
67 
68    return () => {
69      if (matchMedia.removeListener) {
70        matchMedia.removeListener(handleChange);
71      } else {
72        matchMedia.removeEventListener("change", handleChange);
73      }
74    };
75  }, [query]);
76 
77  return matches;
78}
79 
80export type UseMediaQueryReturn = ReturnType<typeof useMediaQuery>;