otp-manager-react

A highly customizable and easy to use OTP Generator and verifier in React JS. Just import the library and send your inputs. It will generate the OTP, send to backend, and verify it once submitted. The OTP Expires in 5 mins. Will customise this in future if required.

Github Repo

https://github.com/arunkarri/otp-manager-react

Install

npm install --save otp-manager-react

Demo

https://otp-manager-arun.netlify.app/

Usage

import React from 'react'

import { ReactOTPGenerator } from 'otp-manager-react'
import 'otp-manager-react/dist/index.css'

const App = () => {
  function callback(res) {
    console.log('callback function')
    console.log(res)
  }
  return (
    //Below example has bootstrap classes.
    <ReactOTPGenerator
      label='My OTP Manager Company'
      mainContainerClass='container'
      emailContainerClass='form-group'
      emailLabel='Email'
      emailFieldClass='form-control mb-3 mt-3'
      otpContainerClass='form-group'
      otpLabel='OTP'
      otpFieldClass='form-control'
      getBtnRowClass='text-center mb-1 mt-3'
      getBtnClasses='btn btn-info'
      getBtnLabel='Get OTP'
      verifyBtnRowClass='text-center'
      verifyBtnClasses='btn btn-success'
      verifyBtnLabel='Verify OTP'
      action={callback}
    />
  )
}

export default App

Props

| Prop name | Purpose | | ------------- | ------------- | | label | Product/Company name to be displayed in the From Field of the Email | | mainContainerClass | Classes for the main Container of the fields | | emailContainerClass | Classes for the email field container | | emailLabel | Label to be displayed for the email field | | emailFieldClass | Classes to be passed for the input Email field | | otpContainerClass | Classes for the otp field container | | otpLabel | Label to be displayed for the otp field | | otpFieldClass | Classes to be passed for the input otp field | | getBtnRowClass | Classes for the Get OTP Button Div | | getBtnClasses | Classes for the Get OTP Button | | getBtnLabel | Display label for the Get OTP Button | | verifyBtnRowClass | Classes for the Verify OTP Button Div | | verifyBtnClasses | Classes for the Verify OTP Button | | verifyBtnLabel | Display label for the Verify OTP Button | | action | callback function to be called after otp is verified |

Donate

License

MIT ©