React hook to detect overflow on a ref

use-has-overflow.ts

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

function checkOverflow(el: HTMLElement | null): boolean {
  if (!el) return false;

  return el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth;
}

export function useHasOverflow(ref: RefObject<HTMLElement | null>) {
  const [overflow, setOverflow] = useState(false);

  useEffect(() => {
    const handler = () => {
      setOverflow(checkOverflow(ref.current));
    };

    handler();

    window.addEventListener('resize', handler, true);

    return () => {
      window.removeEventListener('resize', handler, true);
    };
  }, [ref]);

  return overflow;
}