{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "use-mobile",
  "title": "Use Mobile",
  "author": "Matthew Blode",
  "description": "A hook that detects whether the viewport matches a mobile breakpoint.",
  "files": [
    {
      "path": "hooks/use-mobile.ts",
      "content": "import { useSyncExternalStore } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nconst subscribe = (onStoreChange: () => void) => {\n  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n  mql.addEventListener(\"change\", onStoreChange);\n  return () => mql.removeEventListener(\"change\", onStoreChange);\n};\n\nexport const useIsMobile = () =>\n  useSyncExternalStore(\n    subscribe,\n    () => window.innerWidth < MOBILE_BREAKPOINT,\n    () => false,\n  );\n",
      "type": "registry:lib",
      "target": ""
    }
  ],
  "type": "registry:lib"
}