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.
react-otp-input
![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)
A fully customizable, one-time password input component for the web built with React.
![see here](https://media.giphy.com/media/lN98dFU6h3oP0wWS5x/giphy.gif)
Live Demo
CodeSandbox
Installation
![NPM](https://nodei.co/npm/react-otp-input.png?compact=true)
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
![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)
Contributing
![GitHub pull requests](https://img.shields.io/github/issues-pr/devfolioco/react-otp-input?logo=git)
Feel free to open issues and pull requests!
License
![NPM](https://img.shields.io/npm/l/react-otp-input)
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!