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.

!image

Working Demo

Installing as a package


``
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