@datalayer/core
Version:
[](https://datalayer.io)
48 lines (47 loc) • 1.67 kB
JavaScript
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useRef, useEffect, useState } from 'react';
export const useTextRevealAnimationLines = (text) => {
const ref = useRef(null);
const [lines, setLines] = useState();
useEffect(() => {
if (!ref.current || !text)
return;
const wrapLines = () => {
const element = ref.current;
if (!element || !text)
return;
const originalColor = window.getComputedStyle(element).color;
element.style.color = 'transparent';
element.textContent = '';
const words = text.split(' ');
const lineBreakPositions = [];
let prevHeight = 0;
const linesArr = [];
for (const word of words) {
element.textContent += `${word} `;
const height = element.offsetHeight;
if (linesArr.length === 0) {
prevHeight = height;
linesArr.push([word]);
continue;
}
if (height > prevHeight) {
lineBreakPositions.push(linesArr.length);
linesArr.push([word]);
}
else {
linesArr.at(-1)?.push(word);
}
prevHeight = height;
}
element.style.color = originalColor;
element.textContent = '';
setLines(linesArr.map(line => line.join(' ')));
};
wrapLines();
}, [text]);
return { ref, lines };
};