react-otp-input-type

1.0.2 • Public • Published

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

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

Package Sidebar

Install

npm i react-otp-input-type

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

20.4 kB

Total Files

14

Last publish

Collaborators

  • nuhman7