react-textarea-autosize

react-textarea-autosize is a lightweight React component that renders a native <textarea> and automatically resizes it as the user types, eliminating the need for manual scroll-height calculations or resize event wiring. It weighs about 1.3KB minified and gzipped, supports both controlled and uncontrolled usage, and exposes minRows/maxRows props to clamp growth within a bounded range.

Under the hood it measures the browser’s computed styles for font, padding, and border to calculate the exact pixel height needed for the current value, recalculating on window resize, form reset, and web font load so the textarea never looks broken during a page’s initial render.

What You Get

• Drop-in <textarea> replacement - Accepts the same props as a native textarea, including value, onChange, and style, so migration requires no markup changes.
• minRows/maxRows clamping - Bounds automatic growth between a minimum and maximum number of rows instead of growing without limit.
• onHeightChange callback - Fires with the new pixel height and row height whenever the computed size changes, useful for syncing layout elsewhere on the page.
• cacheMeasurements option - Reuses previously computed sizing data instead of re-reading computed styles on every keystroke, trading a small accuracy risk for performance.
• Universal ref forwarding - Forwards a ref to the underlying textarea DOM node via forwardRef, so callers can still call .focus() or read .value directly.

Common Use Cases

• Chat and comment composers - message boxes that grow as a user types a longer reply, then shrink back down when the field is cleared.
• Form builders with free-text fields - dynamic forms where a description or notes field should never truncate content behind a fixed-height scrollbar.
• Lightweight plain-text editors - editors that want auto-sizing behavior without pulling in a full code-editor dependency.
• Admin/CMS content fields - backoffice tools where editors paste variable-length content and need the field to reflect the actual text length at a glance.

Under The Hood

Architecture Single-purpose React component library organized as a flat module set under src/: index.tsx (the main forwardRef component and resize orchestration), calculateNodeHeight.ts (pure height computation via a shared hidden shadow textarea), getSizingData.ts (reads computed style via window.getComputedStyle, filtered to a fixed SIZING_STYLE allowlist), hooks.ts (small event-listener hooks for window resize, document.fonts loadingdone, and form reset), forceHiddenStyles.ts (imperative style forcing on the shared measurement node), utils.ts (noop/pick helpers), and a conditions/ directory resolved via package.json’s conditional imports map to strip DOM-dependent code paths for edge/worker runtimes at build time. Data flow is one-directional and synchronous: a layout effect calls resizeTextarea() -> getSizingData(node) -> calculateNodeHeight(sizingData, value, minRows, maxRows) -> a direct node.style.setProperty call, guarded by a heightRef to skip redundant DOM writes. The module-level singleton hidden textarea in calculateNodeHeight.ts is shared across every mounted instance, a deliberate but tight coupling point that any refactor of that file needs to preserve.

Tech Stack TypeScript throughout, authored against React 16.8-19 as a peer dependency using hooks only. Exactly two runtime dependencies beyond @babel/runtime: use-composed-ref (merges the forwarded ref with the internal ref) and use-latest (keeps event listeners referencing the latest closure without re-subscribing). Built via @preconstruct/cli into CJS/ESM/edge-light/browser development and production variants declared through an elaborate conditional exports map, aimed at correct tree-shaking and runtime-specific behavior. Testing uses Jest, jsdom, and @testing-library/react; linting uses ESLint with husky and lint-staged for pre-commit enforcement; releases are managed with Changesets. A Vite-powered demo site lives in example/.

Code Quality A single test file covers only two rendering-snapshot cases (default render, and render with an initial height style) - no tests exercise resize behavior, minRows/maxRows clamping, or the height-calculation math directly, so behavioral coverage is thin despite CI running the suite on every push. Error handling is minimal but intentional: the component throws explicit, descriptive errors in development mode when a consumer passes disallowed style.maxHeight/minHeight props. Naming is consistent and descriptive, and types are precise apart from one narrow cast used for IE-only style assignment. ESLint, Prettier, and GitHub Actions CI enforce style and run tests automatically.

API Design The public API is a single default-exported forwardRef component that behaves as a true drop-in replacement for <textarea> - every native textarea prop passes through untouched, and only three opt-in props (minRows, maxRows, onHeightChange) plus a performance escape hatch (cacheMeasurements) are added, so adoption typically requires only an import-and-rename. It quietly handles the hard part - computed-style-based measurement, a documented Firefox double-set workaround, and both controlled and uncontrolled value semantics - without exposing that complexity in the props surface. Documentation is a single README with a props table and a short FAQ, adequate for its narrow scope.