[](https://badge.fury.io/js/react-otp-input)[](https://www.npmjs.com/package/react-otp-input)[](https://www.npmjs.com/package/react-otp-input)

[](#contributors-)

[](https://badge.fury.io/js/reactjs-otp-input)[](https://www.npmjs.com/package/reactjs-otp-input)[](https://www.npmjs.com/package/reactjs-otp-input)

[](#contributors-)

[](https://nodei.co/npm/react-otp-input/)

[](https://nodei.co/npm/reactjs-otp-input/)

importReact, {Component }from'react';

importOtpInputfrom'react-otp-input';

exportdefaultclassAppextendsComponent {

state= { otp:'' };

handleChange= (otp)=>this.setState({ otp });

render() {

return (

<OtpInput

value={this.state.otp}

onChange={this.handleChange}

numInputs={6}

separator={<span>-</span>}

);

}

exportdefaultconstApp {

const [otp,setOtp]=useState('');

consthandleChange= (otp)=>setOtp({ otp });

return<OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>}/>;

}

</tr>

</table>

`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For`v1.0.0` and above, a`value` prop needs to be passed in the component for it to function as expected.

[](https://github.com/devfolioco/react-otp-input/pulls)[](https://github.com/devfolioco/react-otp-input)

-[x] Add flowtypes

-[x] Add ESLint, Prettier for code quality

-[x] Add styling support for states including focus/disabled

-[ ] Write tests

[](https://github.com/devfolioco/react-otp-input/issues)[](https://github.com/devfolioco/react-otp-input/pulls)

Feel free to open[issues](https://github.com/devfolioco/react-otp-input/issues/new/choose) and[pull requests](https://github.com/devfolioco/react-otp-input/pulls)!

[](https://github.com/devfolioco/react-otp-input/blob/master/LICENSE)

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>

<tr>

</tr>

<tr>

</tr>

</table>

This project follows the[all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

{

"name":"react-otp-input",

"version":"2.4.0",

"name":"reactjs-otp-input",

"version":"1.0.1",

"description":"A fully customizable, one-time password input component for the web built with React",

"main":"lib/index.js",

"scripts": {

"webpack-cli":"3.3.12",

"webpack-dev-server":"3.11.2"

},

"author":"Devfolio <engineering@devfolio.co> (https://devfolio.co)",

"author":"",

"license":"MIT",

"homepage":"https://devfolioco.github.io/react-otp-input",

"repository": {

"type":"git",

"url":"https://github.com/devfolioco/react-otp-input"

"url":"https://github.com/hunghg255/react-otp-input"

},

"bugs": {

"url":"https://github.com/devfolioco/react-otp-input/issues"

"url":"https://github.com/hunghg255/react-otp-input/issues"

}

}