useElYOverflow

useElYOverflow.js

const useElYOverflow = (ref, offset) => {
  useEffect(() => {
    const checkOverflow = () => {
      const isOverflowing =
        ref.current.offsetHeight + offset * 2 > window.innerHeight

      if (isOverflowing) {
        ref.current.classList.add('overflowing')

        return
      }

      ref.current.classList.remove('overflowing')
    }

    const handleResize = () => {
      checkOverflow()
    }

    checkOverflow()
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  })
}