useIntersectionObserver documentation
The useIntersectionObserver hook is a custom hook for tracking the intersection of an element with its containing element or the viewport. It provides an easy-to-use interface to observe the visibility of an element.
Type
import
import { useIntersectionObserver } from '@pillar-ui/hooks'
Why useIntersectionObserver
The useIntersectionObserver hook simplifies the process of tracking the intersection of an element with its containing element or the viewport in a React application. It provides an easy-to-use interface for observing the visibility of an element.
Installation
To use the useIntersectionObserver hook, simply import it into your React component:
import { useIntersectionObserver } from '@pillar-ui/hooks'
Parameters
The useIntersectionObserver hook takes three parameters:
ref: React.RefObject<HTMLElement> | Array<React.RefObject<HTMLElement>>
: A ref object or an array of ref objects for the element(s) you want to observe the intersection of.options: IntersectionObserverOptions
: An object containing options for the Intersection Observer. It uses the same options as theIntersectionObserver
constructor. You can refer to the Intersection Observer API documentation for more details on the available options.callback: IntersectionObserverCallback
: A callback function that will be called whenever the intersection of the observed element(s) changes. The callback receives two parameters -entries
(an array ofIntersectionObserverEntry
objects) andobserver
(the Intersection Observer instance). You can refer to the Intersection Observer API documentation for more details on theIntersectionObserverEntry
object.
Usage
To use the useIntersectionObserver hook, call it inside your functional component:
import { useIntersectionObserver } from '@pillar-ui/hooks'
function MyComponent() {
const ref = useRef<HTMLDivElement>(null)
const options = { threshold: 0.5, rootMargin: '0px' }
const callback = (entries, observer) => {
entries.forEach((entry) => {
console.log(entry)
})
} // Perform actions based on the intersection changes
useIntersectionObserver(ref, options, callback)
return <div ref={ref}> Your content here </div>
}
In the example above, the useIntersectionObserver
hook is used to track the intersection of a div
element with its containing element or the viewport. The ref
is assigned to the div
element, and the options
object configures the threshold and rootMargin for the Intersection Observer. The callback
function logs the intersection entries and performs actions based on the intersection changes.
Implementation details
The useIntersectionObserver hook uses the useEffect
and useRef
hooks from React to create and manage the Intersection Observer. It sets up the observer when the component mounts and disconnects it when the component unmounts. It also updates the observer when the ref
, options
, or callback
changes.
TypeScript Support
The useIntersectionObserver hook is written in TypeScript and provides type definitions for its parameters.
Conclusion
The useIntersectionObserver hook simplifies the process of tracking the intersection of an element with its containing element or the viewport in a React application. By handling the complex logic of setting up and managing the Intersection Observer, this hook allows you to easily observe the visibility of elements and perform actions based on intersection changes.