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),

Preview:

Download Details:

Author: ritikbanger

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ritikbanger/react18-input-otp

License: MIT