- Notifications
You must be signed in to change notification settings - Fork18
A verification code input, autocompletion friendly
NotificationsYou must be signed in to change notification settings
ugogo/react-input-verification-code
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
importReactfrom'react';importReactInputVerificationCode,{ReactInputVerificationCodeProps,}from'react-input-verification-code';constcustomProps:ReactInputVerificationCodeProps={autoFocus:true,};exportdefaultfunctionApp(){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
About
A verification code input, autocompletion friendly
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.