6ab510bVS Code-style layout: object tree + figure + details panelJeremy Magland 1import { useEffect, useState } from "react";
3/** Subscribe to a CSS media query; re-renders when it changes. */
4export function useMediaQuery(query: string): boolean {
5 const [matches, setMatches] = useState(() =>
6 typeof window !== "undefined" ? window.matchMedia(query).matches : false
7 );
8 useEffect(() => {
9 const mql = window.matchMedia(query);
10 const onChange = () => setMatches(mql.matches);
11 onChange();
12 mql.addEventListener("change", onChange);
13 return () => mql.removeEventListener("change", onChange);
14 }, [query]);
15 return matches;
16}