react-custom-otp-input

react-custom-otp

A React component library for adding OTP (One-Time Password) functionality to your project.

Install

npm install react-custom-otp-input

Usage

import React, { useState } from 'react';
import { OtpInput } from 'react-custom-otp-input';

const Example = () => {
 const [otp, setOtp] = useState('');

  return (
    <OtpInput
      length={6}
      onChangeOtp={(otp: any) => {
        setOtp(otp);
      }}
      secure={true}
    />
  );
}

Props/Options

Props	Type	Description	Default
length	number	The number of OTP input fields to render. Required.	6
onChangeOtp	Function	A callback function to handle the entered OTP. Required.	-
secure	boolean	Hides the entered input values	false
className	string	Class for each input fields	-
width	number	Width for each input fields	-
height	number	Height for each input fields	-
size	number	Font size for each input fields	-
styles	style(object)	Style for each input fields	-

Full example

import React, { useState } from 'react';
import { OtpInput } from 'react-custom-otp-input';

const Example = () => {
  const [otp, setOtp] = useState('');

  return (
    <OtpInput
      length={6}
      onChangeOtp={(otp: any) => {
        setOtp(otp);
      }}
      secure={true}
    />
  );
};

The react-custom-otp-input library is designed to simplify the process of adding OTP functionality to your React projects. It provides an OTP component that can be easily integrated into your codebase.

To install the library, use the provided npm command, as shown in the "Install" section. Make sure to import the necessary components.

Feel free to explore the library and customize it according to your needs!

License

MIT © Oyinlola Abolrin