Skip to content

Commit ec7a8e8

Browse files
authored
Corrected and expanded Input component ref handling
Renamed `inputRef` to `ref` (as this is the correct prop name), and also expanded on the ref-handling code example in order to use more supported React standards, as `this.refs` is deprecated.
1 parent 5334dd3 commit ec7a8e8

1 file changed

Lines changed: 10 additions & 6 deletions

File tree

README.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -260,12 +260,16 @@ import { Input } from 'react-chat-elements'
260260
text='Send'/>
261261
}/>
262262

263-
// clear text eg:
263+
// Clear text, e.g.:
264+
// For pure components, use inputRef instead of this.inputRef
265+
266+
inputRef = React.createRef();
267+
// ...
264268
<Input
265-
ref='input'
269+
ref={el => (this.inputRef = el)}
266270
placeholder="Type here..."/>
267-
268-
this.refs.input.clear();
271+
// ...
272+
this.inputRef.clear();
269273
```
270274

271275
#### Input props
@@ -283,7 +287,7 @@ this.refs.input.clear();
283287
| inputStyle | none | object | inputStyle object |
284288
| leftButtons | none | object(component) | left buttons component |
285289
| rightButtons | none | object(component) | right buttons component |
286-
| inputRef | none | function | input or textarea ref |
290+
| ref | none | function | input or textarea ref |
287291
| maxlength | none | int | input or textarea maxlength |
288292
| onMaxLengthExceed | none | function | called when max length exceed |
289293
| autofocus | false | bool | input autofocus |
@@ -523,4 +527,4 @@ import { SpotifyMessage } from 'react-chat-elements'
523527
| view | list | string | spotify view type (list or coverart) |
524528
| data | {} | object | message data |
525529
| width | 300 | int | spotify embed width |
526-
| height | 380 | int | spotify embed height |
530+
| height | 380 | int | spotify embed height |

0 commit comments

Comments
 (0)