Source: https://primereact.org/hooks/useintersectionobserver/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• HOOK

• API

useIntersectionObserver

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

Import#

---

import { useIntersectionObserver } from 'primereact/hooks';
         

Copy

Basic#

---

Scroll the parent to view the child element.

Not Visible

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

Copy

Threshold#

---

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 });
         

Copy

• Import

• Basic

• Threshold

PrimeReact 10.9.7 by PrimeTek