React Web OTP

A Customizable OTP Input Component for React

React Web OTP is a customizable OTP (One-Time Password) input component for React applications, designed to enhance user authentication experiences.

Features

• Supports various input types: number, text, and password
• Customizable input fields
• Auto-focus and auto-tab between inputs
• Clipboard paste handling with validation
• Custom styles for input fields

And of course, React Web OTP itself is open source with a public repository on GitHub.

Installation

React Web OTP requires Node.js v10+ to run.

Install the package via npm:

1npm install react-web-otp

Or via yarn:

1yarn add react-web-otp

Usage

Here's an example of how to use the OTPInput component in your React application:

1import React from 'react';
2import OTPInput from 'react-web-otp';
3
4const App = () => {
5  const handleSubmit = (otp) => {
6    console.log('Submitted OTP:', otp);
7  };
8
9   const customSeperator = (props) => {
10    return <span {...props}>#</span>;
11  };
12
13  return (
14    <div>
15      <h1>Enter your OTP</h1>
16      <span>With Prefix</span>
17      <br />
18      <OTPInput
19        length={6}
20        onSubmit={handleSubmit}
21        autoFocus
22        otpType="number"
23        customStyle={{ border: "1px solid #ccc", borderRadius: "4px" }}
24        includePrefix
25        prefix={"H"}
26        seperator={"-"}
27        separatorInterval={2}
28      />
29
30      <br />
31      <span>Prefix with seperator</span>
32      <br />
33      <OTPInput
34        length={6}
35        onSubmit={handleSubmit}
36        autoFocus
37        otpType="number"
38        customStyle={{ border: "1px solid #ccc", borderRadius: "4px" }}
39        includePrefix
40        prefix={"H"}
41        seperator={"-"}
42        separatorInterval={[0, 2]}
43      />
44
45      <br />
46      <span>With out Prefix</span>
47      <br />
48      <OTPInput
49        length={6}
50        onSubmit={handleSubmit}
51        seperator={customSeperator}
52        separatorInterval={[2, 3]}
53      />
54    </div>
55  );
56};
57
58export default App;

Props API

The OTPInput component accepts the following props: Prop Name| Type| Default| Description

---

Prop Name	Type	Default	Description
length	number	4	The number of OTP input fields.
onSubmit	func	(otp) => console.log({ otp }, "Please send the onSubmit props to OTPInput to handle the otp")	Function to handle the OTP submission.
autoFocus	bool	false	If true, the first input field will be focused automatically.
otpType	string	text	The type of OTP input, can be one of "number", "text", "password".
renderInput	func	({ key, ...restProps }) => <input key={key} {...restProps} />	Custom render function for the input fields.
customStyle	object	{}	Custom styles to apply to each input field.
includePrefix	boolean	false	If the includePrefix is true then the otp returned from the onSubmit function will include the prefix
prefix	string	""	The prefix length should not exceed 1 if it exceed more than 1 then the last value is taken if prefix = 'HG' then the prefix will be G
seperator	string or react component	""	if the type of seperator is string then the length should be 1 if it exceeded by 1 then then the last character of the string will be used as a seperator. we can also send the seperator as a react component (props) => { return <span {...props}>@123</span>}
separatorInterval	number or number[]	""	the seperatorInterval can be either string or array of strings. If separatorInterval is number then the seperator will render with that interval and if the separatorInterval is array of numbers then the seperator will render by each number in the array

Development

React Web OTP uses a simple React setup for development. Make changes in your file and instantaneously see your updates!

Open your favorite Terminal and run these commands.

1npm start

License

ISC