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
1.68KB (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://andreypopp.github.io/react-textarea-autosize/
Props
Special props:, prop, type, description, ----------------------------, ---------, ----------------------------------------------------------------------------------------------------------------------------------------------, inputRef, func, Function invoked with DOM node as argument. Default: () => {}, maxRows, number, Maximum number of rows upto 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 and React component instance (this) as second. Default: () => {}, useCacheForDOMMeasurements, boolean, Use object cache 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 inputRef={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();
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 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.