Use Media Query

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5type MediaQuery = string | number;
6 
7export function useMediaQuery(query: MediaQuery): boolean {
8  const [matches, setMatches] = useState<boolean>(false);
9 
10  useEffect(() => {
11    const mediaQueryList = window.matchMedia(String(query));
12 
13    const handleChange = (event: MediaQueryListEvent) => {
14      setMatches(event.matches);
15    };
16 
17    // Initial check
18    setMatches(mediaQueryList.matches);
19 
20    // Add listener for changes
21    mediaQueryList.addEventListener("change", handleChange);
22 
23    // Clean up listener on unmount
24    return () => {
25      mediaQueryList.removeEventListener("change", handleChange);
26    };
27  }, [query]);
28 
29  return matches;
30}