@redocly/theme/src/core/hooks/use-is-truncated.ts

Shared UI components lib

import { useRef, useState, useLayoutEffect } from 'react';

export function useIsTruncated<T extends HTMLElement>(
  content: string | null,
): [React.RefObject<T | null>, boolean] {
  const ref = useRef<T | null>(null);
  const [isTruncated, setIsTruncated] = useState(false);

  useLayoutEffect(() => {
    const el = ref.current;

    if (!el) {
      setIsTruncated(false);
    } else {
      setIsTruncated(el.scrollWidth > el.clientWidth);
    }
  }, [content]);

  return [ref, isTruncated];
}