@primer/react/dist/hooks/useOverflow.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { useState, useEffect } from 'react';

function useOverflow(ref) {
  const $ = c(3);
  const [hasOverflow, setHasOverflow] = useState(false);
  let t0;
  let t1;
  if ($[0] !== ref) {
    t0 = () => {
      if (ref.current === null) {
        return;
      }
      const observer = new ResizeObserver(entries => {
        for (const entry of entries) {
          if (entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth) {
            setHasOverflow(true);
            break;
          }
        }
      });
      observer.observe(ref.current);
      return () => {
        observer.disconnect();
      };
    };
    t1 = [ref];
    $[0] = ref;
    $[1] = t0;
    $[2] = t1;
  } else {
    t0 = $[1];
    t1 = $[2];
  }
  useEffect(t0, t1);
  return hasOverflow;
}

export { useOverflow };