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.

Working Demo

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