Use Line Count

1import { useEffect, useState } from "react"
2 
3export function useLineCount(element: HTMLElement) {
4  const [lineCount, setLineCount] = useState(0)
5 
6  useEffect(() => {
7    const calculateLines = () => {
8      if (!element) return
9      const elementHeight = element.offsetHeight
10      const style = window.getComputedStyle(element)
11      const lineHeight = parseInt(style.lineHeight)
12      const lines = Math.floor(elementHeight / lineHeight)
13      setLineCount(lines)
14    }
15 
16    calculateLines()
17 
18    const resizeObserver = new ResizeObserver(calculateLines)
19    resizeObserver.observe(element)
20 
21    return () => {
22      resizeObserver.disconnect()
23    }
24  }, [element])
25 
26  return lineCount
27}