React Textarea Autosize

Common errors

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

  cause 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.

  cause 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.

  cause `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') })`.

Warnings

• gotcha Older 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.
• gotcha When 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') })`.
• gotcha The 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`.
• gotcha Prior 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.

Install

• npm install react-textarea-autosize npm
• yarn add react-textarea-autosize yarn
• pnpm add react-textarea-autosize pnpm

Imports

• 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
  wrong:

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

  correct:

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

  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.

Quickstart

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.");
}