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

Development

To run the development server:

npm run dev

Checklist

• [x] Add flowtypes
• [x] Add ESLint, Prettier for code quality
• [x] 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!