useLineCount.ts

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

export function useLineCount(ref: RefObject<HTMLElement>): number {
  const [lines, setLines] = useState(0);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const elementHeight = (entry.target as HTMLElement).offsetHeight;
        const lineHeight = parseInt(getComputedStyle(entry.target).lineHeight, 10);
        setLines(elementHeight / lineHeight);
      })
    });
    if (ref.current) {
      resizeObserver.observe(ref.current)
    }

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

  return lines;
}