react-otp-ui

One-time password input component for React.

How to Install

Make sure you have Node.js and NPM installed.

npm install react-otp-ui

Or

yarn add react-otp-ui

How to Use

import React from 'react'
import OtpForm from 'react-otp-ui'

const OTPDemo = () => {
  const handleOnChange = (data) => {
    console.log('data', data)
    
    /* data object like this {digit: '1', digit2: '2', digit3: '3', digit4: '4', otpValue: '1234'} */
  }

  return (
    <OtpForm
      onChange={handleOnChange}
    />
  )
}

Demo

Check out Online Demo here.

import React from 'react'
import OtpForm from 'react-otp-ui'

const OTPDemoAdvanced = () => {
  const handleOnChange = (data) => {
    console.log('data', data)
  }

  return (
    <OtpForm
      onChange={handleOnChange}
      numberOfInputs={6}
      showSeparator
      separtor=":"
      secureInput
    />
  )
}

Available Props

| Prop Name | Type | Default Value | Description | | ------------- | -------- | ------------- | ------------------------------------------------------- | | className | String | '' | className for input to add custom styles | | disabled | Boolean | false | It will disable the inputs to enter values | | numberOfInputs| Number | 4 | Length of OTP value to capture from user | | onChange | Function | null | Callback function to get the entered OTP value | | secureInput | Boolean | false | To render the inputs like password fields | | separator | String | - | Text to show in separator between inputs | | showSeparator | Boolean | false | Flag to show separator between inputs |