File tree Expand file tree Collapse file tree 1 file changed +10
-14
lines changed Expand file tree Collapse file tree 1 file changed +10
-14
lines changed Original file line number Diff line number Diff line change 1
1
# react-otp-input
2
2
3
- [ ![ npm version] ( https://badge.fury.io/js/react-otp-input.svg )] ( https://badge.fury.io/js/react-otp-input ) [ ![ npm] ( https://img.shields.io/npm/dw/react-otp-input.svg?logo=npm )] ( https://www.npmjs.com/package/react-otp-input )
3
+ [ ![ npm version] ( https://badge.fury.io/js/react-otp-input.svg )] ( https://badge.fury.io/js/react-otp-input ) [ ![ npm] ( https://img.shields.io/npm/dw/react-otp-input.svg?logo=npm )] ( https://www.npmjs.com/package/react-otp-input )
4
4
5
5
A fully customizable, one-time password input component for the web built with React.
6
6
7
7
![ see here] ( https://media.giphy.com/media/lN98dFU6h3oP0wWS5x/giphy.gif )
8
8
9
9
[ Live Demo] ( https://devfolioco.github.io/react-otp-input )
10
10
11
- [ CodeSandbox] ( https://codesandbox.io/s/0y849kwoqv )
11
+ [ CodeSandbox] ( https://codesandbox.io/s/react-otp-input-demo-v2-1iy52 )
12
12
13
13
## Installation
14
14
@@ -22,26 +22,23 @@ npm install --save react-otp-input
22
22
23
23
#### Basic usage:
24
24
25
- ``` javascript
25
+ ``` jsx
26
26
import React , { Component } from ' react' ;
27
27
import OtpInput from ' react-otp-input' ;
28
28
29
29
export default class App extends Component {
30
- state = {
31
- otp: ' ' ,
32
- };
30
+ state = { otp: ' ' };
33
31
34
32
handleChange = otp => this .setState ({ otp });
35
33
36
34
render () {
37
35
return (
38
- < div>
39
- < OtpInput
40
- onChange= {this .handleChange }
41
- numInputs= {6 }
42
- separator= {< span> - < / span> }
43
- / >
44
- < / div>
36
+ < OtpInput
37
+ value= {this .state .otp }
38
+ onChange= {this .handleChange }
39
+ numInputs= {6 }
40
+ separator= {< span> - < / span> }
41
+ / >
45
42
);
46
43
}
47
44
}
@@ -193,4 +190,3 @@ Feel free to open [issues](https://github.com/devfolioco/react-otp-input/issues/
193
190
## License
194
191
195
192
[ ![ NPM] ( https://img.shields.io/npm/l/react-otp-input )] ( https://github.com/devfolioco/react-otp-input/blob/master/LICENSE )
196
-
You can’t perform that action at this time.
0 commit comments