A customizable continuous-single-input component, which can be used for OTP/pass-code style input purposes
npm install react-otp-input-type
npm i react-otp-input-type
`
#### How to use?:
`jsx
import React, { useState } from 'react';
import { OTPInputField } from 'react-otp-input-type';
function App() {
const [otp, setOtp] = useState('');
return (
numOfInputs = {6}
handleChange = {setOtp}
/>
Entered value is: {otp}
);
}
`
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