{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-intersection-observer",
  "title": "UseIntersectionObserver",
  "description": "Observes when an element intersects the viewport or a root element.",
  "files": [
    {
      "path": "registry/hooks/use-intersection-observer.tsx",
      "content": "'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseIntersectionObserverOptions extends IntersectionObserverInit {}\n\ninterface UseIntersectionObserverReturn<T extends Element = Element> {\n  ref: (node: T | null) => void;\n  entry: IntersectionObserverEntry | null;\n  isIntersecting: boolean;\n}\n\nexport function useIntersectionObserver<T extends Element = Element>(\n  options: UseIntersectionObserverOptions = {},\n): UseIntersectionObserverReturn<T> {\n  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const ref = useCallback(\n    (node: T | null) => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n\n      if (node) {\n        observerRef.current = new IntersectionObserver(([entry]) => {\n          setEntry(entry);\n        }, options);\n\n        observerRef.current.observe(node);\n      } else {\n        setEntry(null);\n      }\n    },\n    [options],\n  );\n\n  useEffect(() => {\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, []);\n\n  const isIntersecting = entry?.isIntersecting ?? false;\n\n  return { ref, entry, isIntersecting };\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-intersection-observer.tsx"
    }
  ],
  "categories": [
    "ui-and-dom"
  ],
  "type": "registry:hook"
}