Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProWatch an element with an IntersectionObserver and get its latest entry and an isIntersecting flag, with threshold, root, margin and freeze-once-visible options.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when you need the raw intersection data: the ratio visible, the bounding rects, a custom root such as a scroll container, or several thresholds.
Do not use it when a single true or false that flips once is enough; useInView is simpler for reveal-on-scroll. For loading the next page use useInfiniteScroll.
import { useIntersectionObserver } from "@/hooks/use-intersection-observer"const { ref, entry, isIntersecting } = useIntersectionObserver({ threshold: [0, 0.5, 1] })
<div ref={ref}>{Math.round((entry?.intersectionRatio ?? 0) * 100)}% visible</div>useIntersectionObserver(options?): { ref, entry, isIntersecting }
| Option | Type | Default | Description |
|---|---|---|---|
threshold | number | number[] | 0 | Ratios at which the entry updates. |
root | Element | Document | null | null | The scrolling ancestor; null is the viewport. |
rootMargin | string | "0px" | Grow or shrink the root box. |
freezeOnceVisible | boolean | false | Stop observing after the first time it is visible. |
ref is a callback ref; attach it to the element. entry is null until the first callback. Where IntersectionObserver does not exist, nothing is observed and isIntersecting stays false. The observer is disconnected when the element or options change and on unmount.
A hook has no markup. Content must not exist only after it scrolls into view for assistive technology: render it in the DOM and use this hook to enhance (animate, preload), not to gate access.
The hook ships with renderHook tests (use-intersection-observer.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.