Customizable One-time Password Input Component - react18-input-otp

Description:

A fully customizable, one-time password (OTP), phone number, and pin code input component for React powered apps.

Key Features:

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.

Basic usage:

1. Install & Import.

# Yarn
$ yarn add react18-input-otp
# NPM
$ npm i react18-input-otp

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

// OR
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';

2. Add the OtpInput component to the app.

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

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

3. All default props.

numInputs: 4,
onChange: (otp) => console.log(otp),
isDisabled: false,
shouldAutoFocus: false,
value: '',
isInputSecure: false,
onSubmit: (otp) => console.log(otp),