⚠️ This README is for the v2 which is currently in beta release
The v1 can been found here
A verification code input, mobile autocompletion friendly
- Support native autocompletion when receiving a code via SMS
- Support pasted string
{
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
yarn add react-input-verification-code
import React from 'react'; import ReactInputVerificationCode, { ReactInputVerificationCodeProps, } from 'react-input-verification-code'; const customProps: ReactInputVerificationCodeProps = { autoFocus: true, }; export default function App() { return <ReactInputVerificationCode {...customProps} />; }
| Key | Type | Default | Required | Description |
|---|---|---|---|---|
| autoFocus | boolean |
false | false | Should focus on first render |
| inputProps | React.InputHTMLAttributes<HTMLInputElement>; |
undefined |
false | Allow passing custom props into the inputs |
| length | number |
4 |
false | How many inputs will be rendered |
| onChange | function |
() => null |
false | Function called when the value changes |
| onCompleted | function |
() => null |
false | Function called when the value is completed |
| placeholder | string |
· |
false | Inputs placeholder |
| value | string |
"" |
false | Default value |
| type | 'alphanumeric, number' |
number |
false | Should accepts alphanumeric values or only numbers |
Simply override the styles using the following classnames
.ReactInputVerificationCode-container { /* */ } .ReactInputVerificationCode-item { /* */ }
MIT © ugogo