use-intersection

useIntersection.tsx

import { useEffect, useState } from 'react'

type ReturnType = {
  setRef: (elm: Element | null) => void
  done: boolean
}

export const useIntersection = (): ReturnType => {
  const [element, setElement] = useState<Element | null>(null)
  const [done, setDone] = useState(false)

  useEffect(() => {
    if (element) {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting && entry.target === element) {
              observer.unobserve(element)
              setDone(true)
            }
          })
        },
        {
          rootMargin: '-25% 0px',
          threshold: 0,
        },
      )
      observer.observe(element)

      return () => {
        observer.disconnect()
      }
    }
  }, [element])

  return { done, setRef: setElement }
}