react-textarea-autosize

What is react-textarea-autosize?

The react-textarea-autosize package is a React component that automatically adjusts the height of a textarea to fit the content. It is useful for creating text input areas in web applications where the amount of text is dynamic and can grow or shrink.

What are react-textarea-autosize's main functionalities?

Auto-resizing textarea

This feature allows the textarea to automatically resize between a minimum and maximum number of rows based on the content.

<TextareaAutosize minRows={3} maxRows={6} />

Minimum and maximum height

You can set a minimum and maximum height for the textarea, which will be respected during auto-resizing.

<TextareaAutosize style={{ minHeight: '100px', maxHeight: '300px' }} />

Controlled component

The component can be used as a controlled component, with its value being managed by the state of the enclosing component.

<TextareaAutosize value={this.state.text} onChange={this.handleChange} />

Uncontrolled component

The component can also be used as an uncontrolled component, where it maintains its own state.

<TextareaAutosize defaultValue='Initial content' />

Ref forwarding

React refs can be forwarded to the underlying textarea element, allowing for direct DOM access if needed.

const ref = React.createRef();
<TextareaAutosize ref={ref} />

Other packages similar to react-textarea-autosize

autosize

This is a standalone script that can be applied to any textarea element to make it automatically adjust its height. It is not specifically designed for React and requires manual integration.

react-autosize-textarea

A similar React component that also resizes textareas to fit the content. It is an alternative to react-textarea-autosize with a slightly different API and feature set.

README

react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize! Weighs around 1.3KB (minified & gzipped).

This module supports IE9 and above.

import TextareaAutosize from 'react-textarea-autosize';

// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;

React.renderComponent(
  <div>
    <TextareaAutosize />
  </div>,
  document.getElementById('element'),
);

Install

npm install react-textarea-autosize

Demo

https://andarist.github.io/react-textarea-autosize/

Props

Special props:

prop	type	description
maxRows	number	Maximum number of rows up to which the textarea can grow
minRows	number	Minimum number of rows to show for textarea
onHeightChange	func	Function invoked on textarea height change, with height as first argument. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include { rowHeight: number }.
cacheMeasurements	boolean	Reuse previously computed measurements when computing height of textarea. Default: false

Apart from these, the component accepts all props that are accepted by <textarea/>, like style, onChange, value, etc.

FAQ

How to focus

Get a ref to inner textarea:

<TextareaAutosize ref={(tag) => (this.textarea = tag)} />

And then call a focus on that ref:

this.textarea.focus();

To autofocus:

<TextareaAutosize autoFocus />

(all HTML attributes are passed to inner textarea)

How to test it with jest and react-test-renderer if you need ref

Because jest provides polyfills for DOM objects by requiring jsdom and react-test-renderer doesn't provide refs for rendered components out of the box (calling ref callbacks with null), you need to supply a mocked ref in your tests in you need it for your tests. You can do it like this (more can be read here):

const tree = renderer
  .create(<TextareaAutosize />, {
    createNodeMock: () => document.createElement('textarea'),
  })
  .toJSON();