react-input-verification-code
A verification code input, autocompletion friendly

Features
- Support native autocompletion when receiving a code via SMS
- Support pasted string (when number)
Examples
Install
npm install --save react-input-verification-code
yarn add react-input-verification-code
Usage
import * as React from 'react';
import ReactInputVerificationCode from 'react-input-verification-code';
export default function App() {
return <ReactInputVerificationCode />;
}
API
Props
autoFocus | boolean | false | false | Focus on render |
length | number | 4 | false | How many items will be rendered |
onChange | function | () => {} | false | Function called when the value changes |
onCompleted | function | () => {} | false | Function called when the code is completed |
placeholder | string | · | false | String rendered in each item when no value has been typed |
value | string | () => {} | false | Control internal input value |
type | text or password | text | false | Display the item value or a password mask |
passwordMask | string | • | false | Password mask |
CSS Properties
The following CSS properties are set globally so you can easily override them to fit your needs
--ReactInputVerificationCode-itemWidth | 4.5rem | Width of an item |
--ReactInputVerificationCode-itemHeight | 5rem | Height of an item |
--ReactInputVerificationCode-itemSpacing | 1rem | Space between two items |
License
MIT © ugogo