useIntersectionObserver • Dan Stroot

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