useIntersectionObserver
Observe element visibility in the viewport. Great for lazy loading, infinite scroll, and scroll animations.
import { useIntersectionObserver } from "@allem-sdk/hooks";Parameters
| Prop | Type | Default | Description |
|---|---|---|---|
| ref* | RefObject<Element> | — | Ref to the element to observe |
| options.threshold | number | 0 | Visibility threshold (0-1) |
| options.root | Element | null | null | Scrollable ancestor |
| options.rootMargin | string | "0px" | Margin around root |
Returns
boolean — Whether the element is intersecting the viewport.
Usage
const ref = useRef<HTMLDivElement>(null);
const isVisible = useIntersectionObserver(ref, { threshold: 0.5 });
<div ref={ref} className={isVisible ? "animate-in" : "opacity-0"}>
Content appears when scrolled into view
</div>