⚠️ 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-codeimport 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