blob: cc716b54f2ef55a054241a81cd3aeb744e175b4e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
# React Autosize Textarea
A light replacement for built-in `<textarea />` 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(
<TextareaAutosize {...textareaProps} onResize={(e) => {}} />,
document.body
);
```
## Install
```
npm install --save react-autosize-textarea
```
## Demo
[Live Demo](https://rawgit.com/buildo/react-autosize-textarea/master/examples/index.html)
[More Examples](https://github.com/buildo/react-autosize-textarea/tree/master/examples)
## Usage
You can pass any prop you're allowed to use with the default React textarea (`valueLink` too).
You can also pass 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"
}
<TextareaAutosize onResize={onResize} />
```
#### Set min/max height
You can set `minHeight` and `maxHeight` through CSS or inline-style as usual:
```jsx
<TextareaAutosize style={{ minHeight: 20, maxHeight: 80 }} /> // 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
<TextareaAutosize rows={3} /> // minimun height is three rows
```
## 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.
|
