use-textarea-resize

1"use client";
2 
3import type { ComponentProps } from "react";
4import { useLayoutEffect, useRef } from "react";
5 
6export function useTextareaResize(
7	value: ComponentProps<"textarea">["value"],
8	rows = 1,
9) {
10	const textareaRef = useRef<HTMLTextAreaElement>(null);
11 
12	// biome-ignore lint/correctness/useExhaustiveDependencies: Needed
13	useLayoutEffect(() => {
14		const textArea = textareaRef.current;
15 
16		if (textArea) {
17			// Get the line height to calculate minimum height based on rows
18			const computedStyle = window.getComputedStyle(textArea);
19			const lineHeight =
20				Number.parseInt(computedStyle.lineHeight, 10) || 20;
21			const padding =
22				Number.parseInt(computedStyle.paddingTop, 10) +
23				Number.parseInt(computedStyle.paddingBottom, 10);
24 
25			// Calculate minimum height based on rows
26			const minHeight = lineHeight * rows + padding;
27 
28			// Reset height to auto first to get the correct scrollHeight
29			textArea.style.height = "0px";
30			const scrollHeight = Math.max(textArea.scrollHeight, minHeight);
31 
32			// Set the final height
33			textArea.style.height = `${scrollHeight + 2}px`;
34		}
35	}, [textareaRef, value, rows]);
36 
37	return textareaRef;
38}