use-media-query

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5/**
6 * SSR-safe media query hook. Returns `false` during SSR and hydration to
7 * avoid a hydration mismatch, then flips to the real match after mount.
8 */
9export function useMediaQuery(query: string): boolean {
10  const [matches, setMatches] = useState(false);
11  useEffect(() => {
12    if (typeof window === "undefined" || !("matchMedia" in window)) return;
13    const mql = window.matchMedia(query);
14    const update = () => setMatches(mql.matches);
15    update();
16    mql.addEventListener("change", update);
17    return () => mql.removeEventListener("change", update);
18  }, [query]);
19  return matches;
20}
21 
22export const MOBILE_MEDIA_QUERY = "(max-width: 767px)";