useIntersection
HookTracks whether an element is visible in the viewport using IntersectionObserver.
npx arupui add use-intersection
Usage
use-intersection.tsx
import { useIntersection } from "@/hooks/use-intersection"
function LazySection() {
const ref = useRef<HTMLDivElement>(null)
const isVisible = useIntersection(ref, { threshold: 0.5 })
return (
<div ref={ref}>
{isVisible ? <HeavyContent /> : <Placeholder />}
</div>
)
}Parameters
| Parameter | Type | Description |
|---|---|---|
ref | RefObject<HTMLElement> | Ref to the observed element |
options | IntersectionObserverInit | Observer options (optional) |
refRefObject<HTMLElement>Ref to the observed element
optionsIntersectionObserverInitObserver options (optional)
Returns
boolean