Registry / web-framework / react-textarea-autosize

react-textarea-autosize

library8.5.9jsnpmunverified

react-textarea-autosize is a React component that serves as a high-performance, lightweight (approx. 1.3KB minified & gzipped) drop-in replacement for the native `<textarea>` HTML element, automatically adjusting its height to fit its content. Inspired by the popular jQuery Autosize plugin, it provides a seamless user experience for input fields that need to expand dynamically. The package is currently at version 8.5.9 and maintains an active release cadence with frequent patch updates to address bugs and improve compatibility. Key differentiators include its small size, broad React compatibility (supporting React 16.8.0 through 19.0.0), and specific features like `minRows`, `maxRows`, and an `onHeightChange` callback. Recent enhancements have focused on improving module resolution for modern JavaScript runtimes such as Vercel Edge and Cloudflare Workers, resolving race conditions, and bolstering Node.js ESM support.

web-framework

npm install react-textarea-autosize

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TEXTAREA-AUT

react-textarea-autosize

web-frameworkjavascriptv8.5.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TextareaAutosize

✓ import TextareaAutosize from 'react-textarea-autosize';

This is the primary and recommended way to import the component using ES Modules. Compatibility with Node.js ESM was significantly improved in v8.5.0.

TextareaAutosize

✓ const TextareaAutosize = require('react-textarea-autosize').default;

✗ const { TextareaAutosize } = require('react-textarea-autosize');

For CommonJS environments, the component is exported as a default, requiring access via the `.default` property. Directly destructuring (`{ TextareaAutosize }`) will typically result in `undefined`.

TextareaAutosizeProps

✓ import type { TextareaAutosizeProps } from 'react-textarea-autosize';

To import TypeScript types for the component's props, use a type import. This allows for type-checking when extending or wrapping the component.

This example demonstrates how to integrate `TextareaAutosize` into a React application, showing basic usage with state management, `minRows`, `maxRows`, and the `onHeightChange` callback.

import React from 'react'; import { createRoot } from 'react-dom/client'; import TextareaAutosize from 'react-textarea-autosize'; const App = () => { const [value, setValue] = React.useState('Hello, world!\nThis is an autosizing textarea.\nTry typing more to see it grow.'); return ( <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}> <h1>Autosizing Textarea Demo</h1> <TextareaAutosize value={value} onChange={(e) => setValue(e.target.value)} minRows={3} maxRows={10} placeholder="Type something here..." style={{ width: '100%', padding: '8px', fontSize: '16px', lineHeight: '1.5', border: '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box', // Crucial for correct sizing resize: 'none', // Disable native resize }} onHeightChange={(height, { rowHeight }) => { console.log(`Textarea height changed to: ${height}px (rowHeight: ${rowHeight}px)`); }} /> <p style={{ marginTop: '20px' }}>Current value: {value}</p> </div> ); }; const container = document.getElementById('root'); if (container) { const root = createRoot(container); root.render(<App />); } else { console.error("Root element not found."); }

Debug

Known issues

gotchaOlder versions (prior to v8.5.0) might exhibit inconsistent module resolution behavior, particularly for Node.js ESM environments, potentially leading to incorrect imports or bundling issues.

fix

Ensure you are using `react-textarea-autosize@8.5.0` or higher for improved Node.js ESM compatibility and consistent module loading. Always use `import TextareaAutosize from 'react-textarea-autosize';` in ESM contexts.

affects: <8.5.0

gotchaWhen testing `TextareaAutosize` with `react-test-renderer` or JSDOM-based environments, direct refs to the underlying DOM element might not work as expected because `createNodeMock` is not called by default for all components.

fix

To correctly test refs that point to the internal textarea element, provide a `createNodeMock` option to `renderer.create`, e.g., `renderer.create(<TextareaAutosize />, { createNodeMock: () => document.createElement('textarea') })`.

affects: >=1.0.0

gotchaThe internal sizing mechanism relies on a hidden textarea with `display: block`. Custom CSS that overrides this property or other critical layout styles can prevent the component from resizing correctly.

fix

Avoid applying `display: flex`, `display: grid`, `display: inline`, or other conflicting layout properties directly to `TextareaAutosize` if they interfere with the internal `display: block` of the hidden sizing element. Ensure global or parent styles do not inadvertently override its critical sizing properties. Update to `v8.5.4` or higher which includes a fix to force `display: block`.

affects: <8.5.4

gotchaPrior to v8.5.8, a race condition could occur where an internal `requestAnimationFrame` callback would attempt to execute after the textarea component had already been unmounted, leading to errors during component lifecycle.

fix

Update to `react-textarea-autosize@8.5.8` or higher to resolve race conditions related to asynchronous operations and component unmounting.

affects: <8.5.8

Errors

Common errors & fixes

Cannot read properties of null (reading 'style') or similar runtime errors during component unmount.

A race condition where an internal `requestAnimationFrame` callback tries to access a DOM element that has already been removed from the document.

fix

Upgrade to `react-textarea-autosize@8.5.8` or later to include the fix for this race condition.

Textarea height does not change when content is added or removed, or after form reset.

Conflicting CSS styles (especially `display` properties) overriding the internal sizing mechanism, or an issue where the component didn't correctly react to form reset events.

fix

Verify that no custom CSS is overriding essential layout properties on the `TextareaAutosize` component. For form reset issues, ensure you are using `react-textarea-autosize@8.5.7` or newer, which fixed this specific problem.

TypeError: Cannot read properties of undefined (reading 'focus') or similar when using `ref` in testing environments.

`react-test-renderer` (and JSDOM by default) does not provide a concrete DOM node for `ref` callbacks without explicit configuration, causing refs to be `null` or `undefined`.

fix

When using `react-test-renderer`, pass the `createNodeMock` option to `renderer.create` to mock DOM elements for refs, e.g., `renderer.create(<TextareaAutosize />, { createNodeMock: () => document.createElement('textarea') })`.

Upgrade

Version history

8.5.9latest on npm

Audit

Dependencies

reactrequiredPeer dependency for the React component.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/Andarist/react-textarea-autosize ↗

packagehttps://www.npmjs.com/package/react-textarea-autosize ↗