{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-media-query",
  "title": "useMediaQuery",
  "description": "An SSR-safe hook that subscribes to a CSS media query and returns whether it currently matches.",
  "files": [
    {
      "path": "src/registry/hooks/use-media-query.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nexport interface UseMediaQueryOptions {\n  /** Snapshot used during SSR and before hydration. Defaults to false. */\n  serverFallback?: boolean\n}\n\n/**\n * Subscribe to a CSS media query and return whether it currently matches.\n * `useSyncExternalStore` wires `matchMedia`, an external data source, into the\n * React tree: subscribe attaches the `change` listener of `matchMedia(query)`,\n * getSnapshot reads `.matches`, and getServerSnapshot returns `serverFallback`\n * while rendering on the server. All three are new closures whenever `query`\n * changes, so a changing `query` unsubscribes from the old `matchMedia` and\n * subscribes to the new one on its own — no hand-written `useEffect`, no\n * dependency array, and no `setState` in an effect body.\n *\n * `useReducedMotion` in this repo's `animated-text.tsx` is this hook specialised\n * to a single query (`prefers-reduced-motion: reduce`) with `serverFallback`\n * pinned to `false`.\n */\nexport function useMediaQuery(query: string, options: UseMediaQueryOptions = {}): boolean {\n  const { serverFallback = false } = options\n\n  const subscribe = React.useCallback(\n    (callback: () => void) => {\n      if (typeof window === \"undefined\") return () => {}\n      const mql = window.matchMedia(query)\n      mql.addEventListener(\"change\", callback)\n      return () => mql.removeEventListener(\"change\", callback)\n    },\n    [query],\n  )\n\n  const getSnapshot = React.useCallback(() => window.matchMedia(query).matches, [query])\n  const getServerSnapshot = React.useCallback(() => serverFallback, [serverFallback])\n\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n\nexport default useMediaQuery\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}