react-input-otp
Install
npm install --save react-input-otp
Usage
import React Component from 'react'; import InputOtp from 'react-input-otp'; { ; thisstate = otpCode: '' ; } { const handleChange = { this; }; return <InputOtp = = /> };
Properties
Name | Type | Default | Description |
---|---|---|---|
otpLength | number | 6 |
Number of OTP length |
numberOnly | bool | false |
Restrict to digit only (only valid when pattern is null ) |
type | string | 'tel' |
type property of <input> eg. password |
pattern | RegExp | null |
Pattern of characters available to the inputs |
disabled | bool | false |
Disable all the inputs |
error | bool | false |
Whether has error in OTP inputted |
errorMessage | string | null |
Error messaged showed when error is true |
onChange | func | () => {} |
Return OTP value |
autoFocus | bool | false |
Auto focus on the first OTP input |
value | string | '' |
Default value |
wrapperClass | string | styles.otpWrapper |
Class appended to the whole wrapper |
inputWrapperClass | string | styles.otpInputWrapper |
Class appended to the wrapper of inputs |
inputClass | string | styles.otpInput |
Class appended to the inputs |
errorMessageClass | string | styles.errorMessage |
Class appended to the error message |
Development
To run the development server:
npm start # runs rollup with watch flag
To run the example:
cd examplenpm start
Contributing
Feel free to open issues and pull requests.
License
MIT © onefifteen-z