Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Andarist/react-textarea-autosize
<textarea /> component for React which grows with content
https://github.com/Andarist/react-textarea-autosize
javascript react react-component
Last synced: about 2 months ago
JSON representation
<textarea /> component for React which grows with content
- Host: GitHub
- URL: https://github.com/Andarist/react-textarea-autosize
- Owner: Andarist
- License: mit
- Created: 2013-08-12T19:47:26.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2023-12-12T08:54:59.000Z (about 1 year ago)
- Last Synced: 2024-05-02T00:09:39.150Z (8 months ago)
- Topics: javascript, react, react-component
- Language: TypeScript
- Homepage: http://andarist.github.io/react-textarea-autosize/
- Size: 1.95 MB
- Stars: 2,135
- Watchers: 17
- Forks: 241
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-fe-resources - react-textare-autosize
README
[](https://www.npmjs.com/package/react-textarea-autosize)
[](https://www.npmjs.com/package/react-textarea-autosize)
# 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](http://www.jacklmoore.com/autosize/)! Weighs
around 1.3KB (minified & gzipped).
This module supports IE9 and above.
```javascript
import TextareaAutosize from 'react-textarea-autosize';
// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;
React.renderComponent(
,
document.getElementById('element'),
);
```
## Install
`npm install react-textarea-autosize`
## Demo
https://andarist.github.io/react-textarea-autosize/
## Props
### Special props:
| 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 ``, like `style`, `onChange`, `value`, etc.
## FAQ
### How to focus
Get a ref to inner textarea:
```js
(this.textarea = tag)} />
```
And then call a focus on that ref:
```js
this.textarea.focus();
```
To autofocus:
```js
```
(all HTML attributes are passed to inner textarea)
### How to test it with jest and react-test-renderer if you need ref
Because [jest](https://github.com/facebook/jest) provides polyfills for DOM
objects by requiring [jsdom](https://github.com/tmpvar/jsdom) and
[react-test-renderer](https://www.npmjs.com/package/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](https://github.com/facebook/react/issues/7740#issuecomment-247335106)):
```js
const tree = renderer
.create(, {
createNodeMock: () => document.createElement('textarea'),
})
.toJSON();
```