Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buildo/react-autosize-textarea
A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user input.
https://github.com/buildo/react-autosize-textarea
react
Last synced: 3 months ago
JSON representation
A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user input.
- Host: GitHub
- URL: https://github.com/buildo/react-autosize-textarea
- Owner: buildo
- License: mit
- Archived: true
- Created: 2015-06-09T14:08:26.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-06-22T12:56:14.000Z (over 3 years ago)
- Last Synced: 2024-05-29T18:39:30.885Z (6 months ago)
- Topics: react
- Language: TypeScript
- Homepage: http://react-components.buildo.io/#textareaautosize
- Size: 481 KB
- Stars: 487
- Watchers: 9
- Forks: 82
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Autosize Textarea
A light replacement for built-in `` component which automatically adjusts its height to match the content.
**NB: It does not require any polyfill**
```jsx
import ReactDOM from 'react-dom';
import TextareaAutosize from 'react-autosize-textarea';
ReactDOM.renderComponent(
{}} />,
document.body
);
```
## Install
```
npm install --save react-autosize-textarea
```
```
yarn add react-autosize-textarea
```
## Demo
[Live Examples](http://react-components.buildo.io/#textareaautosize)
## Usage
`TextareaAutosize` is perfectly compatible with ReactJS default one, so to get started you can simply replace any `` with ``. It's that easy :)
### Props
You can pass any prop you're allowed to use with the default React `textarea` (`valueLink` too).
In addition to them, `TextareaAutosize` comes with some optional custom `props` to facilitate its usage:
|Name|Type|Default|Description|
|----|----|-------|-----------|
| **onResize** | Function | | *optional*. Called whenever the textarea resizes |
| **rows** | Number | | *optional*. Minimum number of visible rows |
| **maxRows** | Number | | *optional*. Maximum number of visible rows |
| **async** | Boolean | false | *optional*. Initialize `autosize` asynchronously. Enable it if you are using StyledComponents. This is forced to true when `maxRows` is set. Async initialization will make your page "jump" when the component appears, as it will first be rendered with the normal size, then resized to content.
| **ref** | Function | | *optional*. Ref to the DOM node |
#### `onResize`
Sometimes you may need to react any time `TextareaAutosize` resizes itself. To do so, you should use the optional callback **onResize** which will be triggered at any resize with the `autosize:resized` event object:
```jsx
function onResize(event) {
console.log(event.type); // -> "autosize:resized"
}
```
#### Set min/max height
You can set `minHeight` and `maxHeight` through CSS or inline-style as usual:
```jsx
// min-height: 20px; max-height: 80px;
```
**NB:** you may need to take into account borders and/or padding.
In addition to `minHeight`, you can force `TextareaAutosize` to have a minimum number of rows by passing the prop `rows`:
```jsx
// minimun height is three rows
```
In addition to `maxHeight`, you can force `TextareaAutosize` to have a maximum number of rows by passing the prop `maxRows`:
```jsx
// maximum height is three rows
```
#### Refs to DOM nodes
In order to manually call `textarea`'s DOM element functions like `focus()` or `blur()`, you need a ref to the DOM node.
You get one by using the prop `ref` as shown in the example below:
```jsx
class Form extends React.Component {
constructor() {
this.textarea = React.createRef()
}
componentDidMount() {
this.textarea.current.focus();
}
render() {
return (
);
}
}
```
## Browser Compatibility
| Chrome | Firefox | IE | Safari | Android |
| ------------- | ------------- | ----- | ------ | ------- |
| Yes | Yes | 9+ | Yes | 4+ |
## Credits
This module is based on the very popular autosize script written by [Jack Moore](https://github.com/jackmoore).
Check out his [repo](https://github.com/jackmoore/autosize) or [website](http://www.jacklmoore.com/autosize/) for more documentation.