{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-is-in-viewport",
  "title": "useIsInViewport",
  "description": "A hook to check if an element is in the viewport",
  "files": [
    {
      "path": "registry/hooks/use-is-in-viewport.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport function useIsInViewport(\n  ref: React.RefObject<Element | null>,\n  visibility: 'full' | 'partial' | number = 'partial',\n) {\n  const [isVisible, setIsVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!ref.current)\n      return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsVisible(entry.isIntersecting)\n      },\n      {\n        threshold: typeof visibility === 'number' ? visibility : visibility === 'full' ? 1 : 0,\n      },\n    )\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [ref, visibility])\n\n  return isVisible\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-is-in-viewport.ts"
    }
  ],
  "type": "registry:hook"
}