use-media-query

1import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";
2 
3export function useMediaQuery(query: string): Accessor<boolean> {
4  const [matches, setMatches] = createSignal(false);
5 
6  createEffect(() => {
7    if (typeof globalThis.matchMedia !== "function") return;
8 
9    const mediaQuery = globalThis.matchMedia(query);
10    setMatches(mediaQuery.matches);
11 
12    const handler = (event: MediaQueryListEvent) => {
13      setMatches(event.matches);
14    };
15 
16    mediaQuery.addEventListener("change", handler);
17 
18    onCleanup(() => {
19      mediaQuery.removeEventListener("change", handler);
20    });
21  });
22 
23  return matches;
24}