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