supermemory/apps/web/app/lib/hooks/use-text-overflow.ts
2025-01-20 17:50:45 -07:00

22 lines
756 B
TypeScript

import { useCallback, useEffect, useRef, useState } from "react";
export const useTextOverflow = (content: string, lineCount: number) => {
const [showFade, setShowFade] = useState(false);
const contentRef = useRef<HTMLParagraphElement>(null);
const checkOverflow = useCallback(() => {
if (contentRef.current) {
const lineHeight = parseInt(window.getComputedStyle(contentRef.current).lineHeight);
const height = contentRef.current.offsetHeight;
setShowFade(height > lineHeight * lineCount);
}
}, [lineCount]);
useEffect(() => {
checkOverflow();
window.addEventListener("resize", checkOverflow);
return () => window.removeEventListener("resize", checkOverflow);
}, [checkOverflow, content]);
return { contentRef, showFade };
};