blob: 4d8dd53201dec6d37da6d870d487978c2eac8524 (
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
# 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
`TextareaAutosize` is perfectly compatible with ReactJS default one, so to get started you can simply replace any `<textarea></textarea>` with `<TextareaAutosize></TextareaAutosize>`. 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** | <code>Function</code> | | *optional*. Called whenever the textarea resizes |
| **rows** | <code>Number</code> | | *optional*. Minimum number of visible rows |
| **maxRows** | <code>Number</code> | | *optional*. Maximum number of visible rows |
#### `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"
}
<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
```
In addition to `maxHeight`, you can force `TextareaAutosize` to have a maximum number of rows by passing the prop `maxRows`:
```jsx
<TextareaAutosize maxRows={3} /> // 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 `innerRef` as shown in the example below:
```jsx
class Form extends React.Component {
componentDidMount() {
this.textarea.focus();
}
render() {
return (
<TextareaAutosize innerRef={ref => this.textarea = ref} />
);
}
}
```
## 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.
|
