useIntersectionObserver

Executes a callback when an element gets into the viewport of its parent.

Import#


import { useIntersectionObserver } from 'primereact/hooks';

Scroll the parent to view the child element.

Not Visible


const elementRef = useRef(null);
const visible = useIntersectionObserver(elementRef);

The threshold option defines the percentage of how much of the element should be visible, for example 0.5 means at least half of the element.

Not Visible


const elementRef = useRef(null);
const visible = useIntersectionObserver(elementRef, { threshold: 0.5 });