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.
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. PR welcome to add IE8 support.
require('babel/polyfill');
var Textarea = require('react-textarea-autosize');
React.renderComponent(
<div>
<Textarea></Textarea>
</div>,
document.body);
Install
npm install react-textarea-autosize
Demo
http://andreypopp.github.io/react-textarea-autosize/
Development
To release patch, minor or major version:
% make release-patch
% make release-minor
% make release-major
To publish release:
% make publish