hook :: detect text line count

useDetectTextLine.ts

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

const useDetectTextLine = (target: RefObject<HTMLElement>) => {
    const [line, setLine] = useState<number>();
    useEffect(() => {
        const el = target.current;
        if (!el) return;

        const observer = new ResizeObserver((entries) => {
            entries.forEach((entry) => {
                const lh = parseInt(getComputedStyle(entry.target).lineHeight);
                const newH = entry.contentRect.height;
                setLine(newH / lh);
            });
        });

        observer.observe(el);

        return () => {
            observer.disconnect();
        };
    }, []);

    return line;
};

export default useDetectTextLine;