react18-input-otp

react18-input-otp

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

Live Demo

CodeSandbox

Features

• A fully customisable OTP input package with support of React 18 and Typescript.
• It works great on both react and ionic app. Works like a charm on mobile too.
• You can specify only numeric inputs with inputNum prop.
• Works perfectly with clipboard paste feature on web and mobile.
• The only OTP input package on npm that supports 'enter' key to submit.
• Zero OTP paste issues on Android.
• Easy paste on iOS chrome, read from SMS feature.
• Supports onSubmit optional prop. You do not even need a button to submit.
• You can use this package for phone number inputs too.
• You can use this package for passcode fields too with inputSecure prop.
• You can provide custom css as well as input props to the React18-input-otp.
• 0 dependencies.
• Minzipped size only 3.6 kb.
• No open issues.
• No security bugs.

Installation

To install the latest stable version:

npm install --save react18-input-otp

Basic usage:

As class component

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

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>} />;
  }
}

As functional component with hooks

import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
    setOtp(enteredOtp);
  };
  return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
}

API

Name	Type	Required	Default	Description
id	string	false	none	Provide unique id for your OTP input.
numInputs	number	true	4	Number of OTP inputs to be rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
onSubmit	function	false	console.log	Returns OTP code on submit. This allows to submit the OTP on enter key too.
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.
separateAfter	number	false	1	Provide the count to set the separater after every input. For instance, 3 would add - after every third input.
autoComplete	string	false	off	Provide the autocomplete feature for the input. Now, supports one-time-code as autoComplete.
ariaLabelOverride	string	false	none	Provide the custom arialabel for the 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.
isSuccessed	boolean	false	false	Indicates there is success with the inputs..
successStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when success.
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.
custom-test-id	string	false	-	Custom test attribute passed to the inputs.
custom-test-attr	string	false	-	Custom test attribute passed to the inputs.
inputProps	InputHTMLAttributes | InputHTMLAttributes[]	false	-	Custom input props.

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

Special Thanks to devfolioco. This project is build on top of react-otp-input.

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