@julseb-lib/react 1.0.46 → 1.0.47

package/dist/index.d.cts

@@ -532,28 +532,32 @@ declare const usePagination: ({ currentPage, setCurrentPage, totalPages, }: ILib
 };
 
 /**
- * Hook for calculating the number of lines text will occupy in a container with given dimensions and font properties.
+ * Hook for calculating the number of visual lines text will occupy in a textarea or input element based on actual rendered dimensions and styling.
  *
  * @hook
  *
  * @example
- * const lineCount = useTextLineCount(
- *   "This is a long text that will wrap across multiple lines",
- *   300,
- *   16,
- *   "Arial"
+ * const { visualLines, elementRef } = useTextLineCount("Long text content", 16)
+ *
+ * return (
+ *   <textarea
+ *     ref={elementRef}
+ *     value={text}
+ *     style={{ height: `${visualLines * 1.5}rem` }}
+ *   />
  * )
  *
  * @param {string} text - The text content to measure for line count.
- * @param {number} containerWidth - The width of the container in pixels.
- * @param {number} [fontSize=16] - The font size in pixels. Default: 16.
- * @param {string} [fontFamily="lato"] - The font family to use for measurement. Default: "system-ui".
+ * @param {number} [fontSize=16] - The font size in pixels for fallback calculations. Default: 16.
  *
- * @returns {number} The number of lines the text will occupy.
+ * @returns {{ visualLines: number; elementRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }} Object containing the calculated visual line count and element ref to attach to the target element.
  *
  * @see https://doc-julseb-lib-react.vercel.app/hooks/use-text-line-count
  */
-declare const useTextLineCount: (text: string, containerWidth: number, fontSize?: number, fontFamily?: string) => number;
+declare const useTextLineCount: (text: string, fontSize?: number) => {
+    visualLines: number;
+    elementRef: react.RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+};
 
 /**
  * Hook to detect if the current device supports touch screen interaction.

package/dist/index.d.ts

@@ -532,28 +532,32 @@ declare const usePagination: ({ currentPage, setCurrentPage, totalPages, }: ILib
 };
 
 /**
- * Hook for calculating the number of lines text will occupy in a container with given dimensions and font properties.
+ * Hook for calculating the number of visual lines text will occupy in a textarea or input element based on actual rendered dimensions and styling.
  *
  * @hook
  *
  * @example
- * const lineCount = useTextLineCount(
- *   "This is a long text that will wrap across multiple lines",
- *   300,
- *   16,
- *   "Arial"
+ * const { visualLines, elementRef } = useTextLineCount("Long text content", 16)
+ *
+ * return (
+ *   <textarea
+ *     ref={elementRef}
+ *     value={text}
+ *     style={{ height: `${visualLines * 1.5}rem` }}
+ *   />
  * )
  *
  * @param {string} text - The text content to measure for line count.
- * @param {number} containerWidth - The width of the container in pixels.
- * @param {number} [fontSize=16] - The font size in pixels. Default: 16.
- * @param {string} [fontFamily="lato"] - The font family to use for measurement. Default: "system-ui".
+ * @param {number} [fontSize=16] - The font size in pixels for fallback calculations. Default: 16.
  *
- * @returns {number} The number of lines the text will occupy.
+ * @returns {{ visualLines: number; elementRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }} Object containing the calculated visual line count and element ref to attach to the target element.
  *
  * @see https://doc-julseb-lib-react.vercel.app/hooks/use-text-line-count
  */
-declare const useTextLineCount: (text: string, containerWidth: number, fontSize?: number, fontFamily?: string) => number;
+declare const useTextLineCount: (text: string, fontSize?: number) => {
+    visualLines: number;
+    elementRef: react.RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+};
 
 /**
  * Hook to detect if the current device supports touch screen interaction.

package/dist/index.js

@@ -2312,48 +2312,75 @@ var usePagination = ({
 
 // src/lib/hooks/useTextLineCount.tsx
 import { useState as useState8, useRef, useCallback, useEffect as useEffect7 } from "react";
-var useTextLineCount = (text, containerWidth, fontSize = 16, fontFamily = "lato") => {
-  const [lineCount, setLineCount] = useState8(1);
-  const canvasRef = useRef(null);
+var useTextLineCount = (text, fontSize = 16) => {
+  const [visualLines, setVisualLines] = useState8(1);
+  const elementRef = useRef(
+    null
+  );
   const measureLines = useCallback(() => {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement("canvas");
+    const element = elementRef.current;
+    if (!element || !text) {
+      setVisualLines(1);
+      return;
     }
-    const canvas = canvasRef.current;
-    const context = canvas.getContext("2d");
-    if (!context || !text || containerWidth <= 0) {
-      setLineCount(1);
+    const computedStyle = getComputedStyle(element);
+    const paddingLeft = parseInt(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseInt(computedStyle.paddingRight) || 0;
+    const borderLeft = parseInt(computedStyle.borderLeftWidth) || 0;
+    const borderRight = parseInt(computedStyle.borderRightWidth) || 0;
+    const actualWidth = element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+    if (actualWidth <= 0) {
+      setVisualLines(1);
       return;
     }
-    context.font = `${fontSize}px ${fontFamily}`;
-    const lines = text.split("\n");
-    let totalLines = 0;
-    lines.forEach((line) => {
-      if (line.length === 0) {
-        totalLines += 1;
-        return;
-      }
-      const words = line.split(" ");
-      let currentLine = "";
-      let linesForThisSegment = 1;
-      for (const word of words) {
-        const testLine = currentLine ? `${currentLine} ${word}` : word;
-        const testWidth = context.measureText(testLine).width;
-        if (testWidth > containerWidth && currentLine) {
-          linesForThisSegment++;
-          currentLine = word;
-        } else {
-          currentLine = testLine;
-        }
-      }
-      totalLines += linesForThisSegment;
-    });
-    setLineCount(Math.max(1, totalLines));
-  }, [text, containerWidth, fontSize, fontFamily]);
+    try {
+      const hiddenDiv = document.createElement("div");
+      hiddenDiv.style.position = "absolute";
+      hiddenDiv.style.visibility = "hidden";
+      hiddenDiv.style.height = "auto";
+      hiddenDiv.style.width = `${actualWidth}px`;
+      hiddenDiv.style.fontSize = computedStyle.fontSize || `${fontSize}px`;
+      hiddenDiv.style.fontFamily = computedStyle.fontFamily || "system-ui";
+      hiddenDiv.style.lineHeight = computedStyle.lineHeight || "1.2";
+      hiddenDiv.style.wordWrap = "break-word";
+      hiddenDiv.style.whiteSpace = "pre-wrap";
+      hiddenDiv.style.padding = "0";
+      hiddenDiv.style.margin = "0";
+      hiddenDiv.style.border = "none";
+      document.body.appendChild(hiddenDiv);
+      hiddenDiv.textContent = text;
+      const elementHeight = hiddenDiv.offsetHeight;
+      const lineHeight = parseInt(getComputedStyle(hiddenDiv).lineHeight) || fontSize * 1.2;
+      const calculatedLines = Math.max(
+        1,
+        Math.round(elementHeight / lineHeight)
+      );
+      document.body.removeChild(hiddenDiv);
+      setVisualLines(calculatedLines);
+    } catch (error) {
+      console.warn("Element line count measurement failed:", error);
+      setVisualLines(text.split("\n").length);
+    }
+  }, [text, fontSize]);
   useEffect7(() => {
-    measureLines();
+    const timer = setTimeout(measureLines, 50);
+    return () => clearTimeout(timer);
   }, [measureLines]);
-  return lineCount;
+  useEffect7(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(() => {
+      measureLines();
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureLines]);
+  return {
+    visualLines,
+    elementRef
+  };
 };
 
 // src/lib/hooks/useTouchScreen.tsx