react hook is truncated

isTruncated.tsx

import { useLayoutEffect, useState } from 'react';

/**
 * Determine if the input DOM element is truncated by CSS (using ellipse for example)
 * @param domElement
 * @returns boolean
 */
export function isTruncated(domElement: Element): boolean {
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth
    return domElement.scrollWidth > domElement.clientWidth;
}

export function useIsTruncated<T extends Element>(ref: React.MutableRefObject<null | T>): boolean {
    const [isTruncatedState, setIsTruncatedState] = useState(false);

    useLayoutEffect(() => {
        if (ref.current !== null) {
            const isTextTruncated = isTruncated(ref.current);
            if (isTruncatedState !== isTextTruncated) {
                setIsTruncatedState(isTextTruncated);
            }
        }
    }, [isTruncatedState, ref]);

    return isTruncatedState;
}