react-otp-input

What is react-otp-input?

The react-otp-input package is a React component for handling one-time password (OTP) inputs. It provides a customizable and easy-to-use interface for users to input OTPs, which are commonly used for two-factor authentication (2FA) and other security measures.

What are react-otp-input's main functionalities?

Basic OTP Input

This feature allows you to create a basic OTP input with a specified number of input fields. The `numInputs` prop determines the number of OTP input fields, and the `separator` prop allows you to customize the separator between the input fields.

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

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

  return (
    <OTPInput
      value={otp}
      onChange={setOtp}
      numInputs={6}
      separator={<span>-</span>}
    />
  );
};

export default OTPComponent;

Custom Styling

This feature allows you to apply custom styles to the OTP input fields. The `inputStyle` prop accepts a style object that can be used to customize the appearance of each input field.

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

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

  return (
    <OTPInput
      value={otp}
      onChange={setOtp}
      numInputs={6}
      inputStyle={{
        width: '2rem',
        height: '2rem',
        margin: '0 0.5rem',
        fontSize: '1.5rem',
        borderRadius: '4px',
        border: '1px solid rgba(0,0,0,0.3)'
      }}
    />
  );
};

export default OTPComponent;

Handling OTP Completion

This feature demonstrates how to handle the completion of OTP input. The `handleChange` function checks if the OTP length matches the expected number of inputs and performs an action (e.g., logging the OTP) when the OTP is complete.

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

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

  const handleChange = (otp) => {
    setOtp(otp);
    if (otp.length === 6) {
      console.log('OTP Complete:', otp);
    }
  };

  return (
    <OTPInput
      value={otp}
      onChange={handleChange}
      numInputs={6}
    />
  );
};

export default OTPComponent;

Other packages similar to react-otp-input

react-pin-input

The react-pin-input package provides a similar functionality to react-otp-input, allowing users to input PINs or OTPs. It offers customization options for the input fields and supports various input types. Compared to react-otp-input, react-pin-input has a simpler API but may lack some advanced customization features.

react-code-input

The react-code-input package is another alternative for handling OTP or PIN inputs in React applications. It provides a highly customizable input component with support for different input types and styles. Compared to react-otp-input, react-code-input offers more flexibility in terms of styling and input handling.

react-otp-input-box

The react-otp-input-box package is a lightweight OTP input component for React. It focuses on simplicity and ease of use, making it a good choice for basic OTP input needs. Compared to react-otp-input, react-otp-input-box is more minimalistic and may not offer as many customization options.

README

react-otp-input

A fully customizable, one-time password input component for the web built with React.

Live Demo

CodeSandbox

Installation

To install the latest stable version:

npm install --save react-otp-input

Basic usage:

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

export default class App extends Component {
  state = { otp: '' };

  handleChange = (otp) => this.setState({ otp });

  render() {
    return (
      <OtpInput
        value={this.state.otp}
        onChange={this.handleChange}
        numInputs={6}
        separator={<span>-</span>}
      />
    );
  }
}

API

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of OTP inputs to be rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
value	string / number	true	''	The value of the OTP passed into the component.
placeholder	string	false	none	Specify an expected value of each input. The length of this string should be equal to numInputs.
separator	component	false	none	Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input.
containerStyle	style (object) / className (string)	false	none	Style applied or class passed to container of inputs.
inputStyle	style (object) / className (string)	false	none	Style applied or class passed to each input.
focusStyle	style (object) / className (string)	false	none	Style applied or class passed to inputs on focus.
isDisabled	boolean	false	false	Disables all the inputs.
disabledStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when disabled.
hasErrored	boolean	false	false	Indicates there is an error in the inputs.
errorStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when errored.
shouldAutoFocus	boolean	false	false	Auto focuses input on initial page load.
isInputNum	boolean	false	false	Restrict input to only numbers.
isInputSecure	boolean	false	false	Masks input characters.
data-cy	string	false	-	Test attribute passed to the inputs.
data-testid	string	false	-	Test attribute passed to the inputs.

Breaking changes when porting to v1.0.0

react-otp-input is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For v1.0.0 and above, a value prop needs to be passed in the component for it to function as expected.

Development

To run the development server:

npm run dev

Checklist

• Add flowtypes
• Add ESLint, Prettier for code quality
• Add styling support for states including focus/disabled
• Write tests

Contributing

Feel free to open issues and pull requests!

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Abhishek Warokar 💻 🎨 🚧 🤔 👀

Aj 💻 🎨 🤔

Aromal Anil 💻 🔧

Gabriele Corti 💻 ️️️️♿️

Anoop 💻

Dewansh Rawat 🐛

Ishan Chhabra 💻

This project follows the all-contributors specification. Contributions of any kind welcome!