{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-is-mobile",
  "description": "A custom hook to detect mobile devices.",
  "files": [
    {
      "path": "src/registry/new-york/hooks/use-is-mobile.ts",
      "content": "import { useEffect, useState } from \"react\";\n\n/**\n * A custom hook that detects if the current viewport is mobile-sized.\n * It uses a media query to determine if the width is less than 768 pixels.\n * @returns {boolean} - Returns true if the viewport is mobile-sized, false otherwise.\n */\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}