@quantfive/react-textarea-autosize
v7.1.2
Published
textarea component for React which grows with content
Downloads
109
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 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.