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'),
);
npm install react-textarea-autosize
https://andarist.github.io/react-textarea-autosize/
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.
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)
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();