JAVASCRIPT

check overflow react

// useIsOverflow.ts/js
// Children and parent elements should have height explicitly

import { MutableRefObject, useLayoutEffect, useState } from 'react'

const useIsOverflow = (ref: MutableRefObject<HTMLDivElement>) => {
  const [isOverflow, setIsOverflow] = useState(false)
  const { current } = ref

  useLayoutEffect(() => {
    if (current) setIsOverflow(current.scrollHeight > current.clientHeight)
  }, [current])

  return isOverflow
}

export default useIsOverflow