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

Readme

Source

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!

This module supports IE9 and above.

import Textarea from 'react-textarea-autosize';

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

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

Install

npm install react-textarea-autosize

Demo

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

Development

To release patch, minor or major version:

% npm run release:patch
% npm run release:minor
% npm run release:major

This will run eslint, compile sources from src/ to lib/, es/ and dist/, bump a version in package.json and then create a new git commit with tag. If tests or linter fails — commit won't be created. If tasks succeed it publishes to npm and pushes a tag to github.

Keywords

FAQs

What is react-textarea-autosize?

Is react-textarea-autosize well maintained?

Last updated on 25 May 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install