react-otp-input-type
A lightweight and customizable continuous-single-input component, which can be used for OTP/pass-code style input purposes for React apps.
Installing as a package
npm i react-otp-input-type
How to use?:
import React, { useState } from 'react';
import { OTPInputField } from 'react-otp-input-type';
function App() {
const [otp, setOtp] = useState('');
return (
<div className="App">
<OTPInputField
numOfInputs = {6}
handleChange = {setOtp}
/>
<p>Entered value is: {otp}</p>
</div>
);
}Props
| Name |
Type/Default | Description |
|---|---|---|
| numOfInputs |
number / 4 |
Total number of inputs |
| isOnlyNumberAllowed |
boolean / false |
Flag to allow only numbers to be enetered |
| isDisabled |
boolean / false |
Flag to disable all the inputs |
| placeholder |
string / '' |
Placeholder value for inputs. Sample: `f76t`. |
| value |
string / '' |
Default value for inputs when component is loaded for first time. Sample: `f76t`. |
| maskInput |
boolean / false |
Mask or hide the input characters |
| hasError |
boolean / false |
Flag that denotes there is an error on the input. Specific error style is applied on the inputs |
| handleChange |
Function / (otp) => otp |
Function that can be used to listen to input changes. See the demo code for usage. |
| styleObject |
Object / {} |
Object that contain JSX style-object which can override default input styles. |
License
MIT