React18-input-otp NPM

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.

see here

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