Autosize Textarea

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6/** SSR-safe: `CSS` doesn't exist in Node, so this stays `false` until it's read on the client. */
7const supportsFieldSizing =
8  typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("field-sizing", "content")
9 
10export interface AutosizeTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
11  /** Rows visible before the textarea starts growing. */
12  minRows?: number
13  /** Rows it grows to before switching to internal scrolling. */
14  maxRows?: number
15}
16 
17interface Metrics {
18  lineHeight: number
19  verticalPadding: number
20  verticalBorder: number
21}
22 
23/** Reads line-height/padding/border once per element so minRows/maxRows convert to real pixels. */
24function measure(el: HTMLTextAreaElement): Metrics {
25  const style = window.getComputedStyle(el)
26  let lineHeight = parseFloat(style.lineHeight)
27  if (Number.isNaN(lineHeight)) lineHeight = parseFloat(style.fontSize) * 1.2
28  return {
29    lineHeight,
30    verticalPadding: parseFloat(style.paddingTop) + parseFloat(style.paddingBottom),
31    verticalBorder: parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth),
32  }
33}
34 
35export const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, AutosizeTextareaProps>(
36  ({ minRows = 2, maxRows = 8, rows, className, style, onInput, value, defaultValue, ...props }, ref) => {
37    const innerRef = React.useRef<HTMLTextAreaElement | null>(null)
38    const metricsRef = React.useRef<Metrics | null>(null)
39 
40    const setRefs = React.useCallback(
41      (node: HTMLTextAreaElement | null) => {
42        innerRef.current = node
43        if (typeof ref === "function") ref(node)
44        else if (ref) ref.current = node
45      },
46      [ref],
47    )
48 
49    // Writes the DOM directly rather than setState: where field-sizing is supported,
50    // min/max-height is all it takes and the browser does the growing; otherwise it is
51    // height:auto → measure scrollHeight → clamp to [minHeight, maxHeight] every time.
52    const resize = React.useCallback(() => {
53      const el = innerRef.current
54      if (!el) return
55      if (!metricsRef.current) metricsRef.current = measure(el)
56      const { lineHeight, verticalPadding, verticalBorder } = metricsRef.current
57      const box = verticalPadding + verticalBorder
58      const minHeight = lineHeight * minRows + box
59      const maxHeight = lineHeight * maxRows + box
60 
61      el.style.minHeight = `${minHeight}px`
62// … truncated