Function useIsOverflowing

packages/emcn/src/components/tooltip/tooltip.tsx:149–187

()

 * current element (e.g. for live measurements in event handlers).
 */
export function useIsOverflowing<T extends HTMLElement = HTMLElement>(): {
  ref: (node: T | null) => void
  node: React.RefObject<T | null>
  isOverflowing: boolean
} {
  const [isOverflowing, setIsOverflowing] = React.useState(false)
  const nodeRef = React.useRef<T | null>(null)
  const observerRef = React.useRef<ResizeObserver | null>(null)

  const measure = React.useCallback(() => {
    const element = nodeRef.current
    if (element) setIsOverflowing(isTextClipped(element))
  }, [])

  const ref = React.useCallback(
    (node: T | null) => {
      observerRef.current?.disconnect()
      observerRef.current = null
      nodeRef.current = node
      if (!node) return

      measure()
      const observer = new ResizeObserver(measure)
      observer.observe(node)
      observerRef.current = observer
    },
    [measure]
  )

  React.useEffect(() => {
    window.addEventListener('resize', measure)
    return () => {
      window.removeEventListener('resize', measure)
      observerRef.current?.disconnect()
    }
  }, [measure])

  return { ref, node: nodeRef, isOverflowing }
}

/** Whether an element's content is wider than its visible box. */
export function isTextClipped(element: HTMLElement): boolean {