The Intersection Observer API allows you to configure a callback that is called whenever an element, called the target, intersects either the device viewport or a specified element; for the purpose of this API, this is called the root element or root.
- onIntersect: Callback function
- rootMargin: Margin around the root. Serves to grow or shrink each side of the root element's bounding box before computing intersections.
- threshold: at what percentage of the target's visibility the observer's callback should be executed.
import { useEffect } from 'react'
const useIntersectionObserver = ({
target,
onIntersect,
threshold = 0.2,
rootMargin = '0px',
}) => {
useEffect(() => {
if (!target) {
return
}
const observer = new IntersectionObserver(onIntersect, {
rootMargin,
threshold,
})
// Once you have created the observer, you need to give it a target element to watch
const current = target.current
observer.observe(current)
// clean up our observer
return () => {
observer.unobserve(current)
}
})
}
export default useIntersectionObserver