Skip to main content

Function: useIntersectionObserver()

useIntersectionObserver(elementRef, refTrigger, observerOptions?): boolean

Defined in: hooks/useIntersectionObserver/index.ts:16

useIntersectionObserver

Parameters​

elementRef​

RefObject<null | HTMLElement>

A ref to the element to observe.

refTrigger​

A trigger to re-run the effect when the ref is set.

string | number | boolean

observerOptions?​

IntersectionObserverInit = ...

Options for the Intersection Observer.

Returns​

boolean

True if the element is intersecting, false otherwise.

Description​

A custom hook that uses the Intersection Observer API to detect when an element is in the viewport.

Example​

const myRef = useRef(null);
const [refSet, setRefSet] = useState(false);
const isVisible = useIntersectionObserver(myRef, refSet);
<div ref={(node) => { myRef.current = node; setRefSet(true); }}>...</div>