Initial commit

src/components/shared/FillWidthText/useFillWidthText.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback } from 'react';
+
+interface UseFillWidthTextReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    textRef: React.RefObject<HTMLElement | null>;
+    fontSize: number;
+    isReady: boolean;
+}
+
+const BASE_FONT_SIZE = 100;
+
+// Shared canvas for text measurement (no DOM manipulation needed)
+let measureCanvas: HTMLCanvasElement | null = null;
+
+function getMeasureCanvas(): CanvasRenderingContext2D | null {
+    if (typeof document === 'undefined') return null;
+    if (!measureCanvas) {
+        measureCanvas = document.createElement('canvas');
+    }
+    return measureCanvas.getContext('2d');
+}
+
+export default function useFillWidthText(text: string): UseFillWidthTextReturn {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLElement>(null);
+    const [fontSize, setFontSize] = useState(BASE_FONT_SIZE);
+    const [isReady, setIsReady] = useState(false);
+
+    // Cache for computed styles
+    const stylesRef = useRef<{ fontFamily: string; fontWeight: string } | null>(null);
+
+    const calculateFontSize = useCallback(() => {
+        if (!containerRef.current || !textRef.current) return;
+
+        const container = containerRef.current;
+        const textElement = textRef.current;
+
+        const containerWidth = container.offsetWidth;
+        if (containerWidth === 0) return;
+
+        // Cache styles on first calculation
+        if (!stylesRef.current) {
+            const computed = getComputedStyle(textElement);
+            stylesRef.current = {
+                fontFamily: computed.fontFamily,
+                fontWeight: computed.fontWeight,
+            };
+        }
+
+        const ctx = getMeasureCanvas();
+        if (!ctx) return;
+
+        // Measure text using canvas (fast, no reflow)
+        const { fontFamily, fontWeight } = stylesRef.current;
+        ctx.font = `${fontWeight} ${BASE_FONT_SIZE}px ${fontFamily}`;
+        const textWidth = ctx.measureText(text).width;
+
+        if (textWidth === 0) return;
+
+        const newFontSize = (containerWidth / textWidth) * BASE_FONT_SIZE;
+
+        setFontSize(newFontSize);
+        setIsReady(true);
+    }, [text]);
+
+    // Initial calculation
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => {
+            calculateFontSize();
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [text, calculateFontSize]);
+
+    // Debounced resize observer
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        let rafId: number | null = null;
+
+        const resizeObserver = new ResizeObserver(() => {
+            // Debounce using RAF - only calculate once per frame
+            if (rafId) cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                calculateFontSize();
+            });
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            if (rafId) cancelAnimationFrame(rafId);
+            resizeObserver.disconnect();
+        };
+    }, [calculateFontSize]);
+
+    // Reset style cache if text changes (might have different element)
+    useEffect(() => {
+        stylesRef.current = null;
+    }, [text]);
+
+    return {
+        containerRef,
+        textRef,
+        fontSize,
+        isReady
+    };
+}