YesPlayMusic/packages/web/hooks/useIntersectionObserver.ts

import { useState, useEffect, RefObject } from 'react'

const useIntersectionObserver = (
  element: RefObject<Element>
): { onScreen: boolean } => {
  const [onScreen, setOnScreen] = useState(false)

  useEffect(() => {
    if (element.current) {
      const observer = new IntersectionObserver(([entry]) =>
        setOnScreen(entry.isIntersecting)
      )
      observer.observe(element.current)
      return () => {
        observer.disconnect()
      }
    }
  }, [element, setOnScreen])

  return {
    onScreen,
  }
}

export default useIntersectionObserver