Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.


npm i @uidotdev/usehooks


The useIntersectionObserver hook is useful because it provides a straightforward, built-in method for tracking the visibility and position of a DOM element in relation to the viewport. By leveraging the Intersection Observer API, it can greatly optimize performance and provide efficient, real-time updates for lazy-loading, infinite scrolling, or other visibility-dependent elements. With customizable thresholds and root margins, developers have fine-grained control over when the hook triggers, improving the user experience by dynamically loading content only when necessary.


thresholdnumber1Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed.
rootelementnullThe Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.
rootMarginstring“0%”Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros.

Return Value

refReact ref objectA React reference that can be attached to a DOM element to observe.
entryobjectAn object containing information about the intersection. This object is similar to IntersectionObserverEntry.



More Hooks: