Package Exports

react-otp-input-type
react-otp-input-type/dist/index.es.js
react-otp-input-type/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-otp-input-type) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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