A verification code input, autocompletion friendly
- Support native autocompletion when receiving a code via SMS
- Support pasted string (when number)
npm install --save react-input-verification-codeyarn add react-input-verification-codeimport * as React from 'react';
import ReactInputVerificationCode from 'react-input-verification-code';
export default function App() {
return <ReactInputVerificationCode />;
}| Key | Type | Default | Required | Description |
|---|---|---|---|---|
| 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 |
The following CSS properties are set globally so you can easily override them to fit your needs
| Key | Default | Description |
|---|---|---|
--ReactInputVerificationCode-itemWidth |
4.5rem |
Width of an item |
--ReactInputVerificationCode-itemHeight |
5rem |
Height of an item |
--ReactInputVerificationCode-itemSpacing |
1rem |
Space between two items |
MIT © ugogo