Use Line Breakdown

1import { RefObject, useEffect, useState } from "react"
2 
3interface UseLineBreakdownResult {
4  lineCount: number
5  lines: string[][]
6}
7 
8export function useLineBreakdown(
9  elementRef: RefObject<HTMLElement | null>,
10  text: string
11): UseLineBreakdownResult {
12  const [breakdown, setBreakdown] = useState<UseLineBreakdownResult>({
13    lineCount: 0,
14    lines: [[]],
15  })
16 
17  useEffect(() => {
18    const element = elementRef.current
19    if (!element) return
20 
21    const calculateLines = () => {
22      // Get basic measurements
23      const style = window.getComputedStyle(element)
24      const lineHeight = parseInt(style.lineHeight)
25      const elementHeight = element.offsetHeight
26 
27      const linesCount = Math.ceil(elementHeight / lineHeight)
28 
29      console.log(elementHeight / lineHeight)
30 
31      // Create temporary elements to measure text
32      const tempSpan = element.appendChild(document.createElement("span"))
33      tempSpan.style.visibility = "hidden"
34      tempSpan.style.position = "absolute"
35      tempSpan.style.whiteSpace = "nowrap"
36      element.appendChild(tempSpan)
37 
38      // Split text into words
39      const words = text.split(" ")
40      const lineGroups: string[][] = [[]]
41      let currentLine = 0
42      let previousTop = 0
43 
44      // Group words into lines
45      words.forEach((word, index) => {
46        tempSpan.textContent = word
47        const rect = tempSpan.getBoundingClientRect()
48 
49        if (rect.top > previousTop && index > 0) {
50          currentLine++
51          lineGroups[currentLine] = []
52          previousTop = rect.top
53        }
54 
55        lineGroups[currentLine].push(word)
56      })
57 
58      element.removeChild(tempSpan)
59 
60      setBreakdown({
61        lineCount: lineGroups.length,
62        lines: lineGroups,
63      })
64    }
65 
66    calculateLines()
67 
68    const resizeObserver = new ResizeObserver(calculateLines)
69    resizeObserver.observe(element)
70 
71    return () => {
72      resizeObserver.disconnect()
73    }
74  }, [elementRef, text])
75 
76  return breakdown
77}