Implement OTP Input In React Js

In this article, we will implement react-otp-input in react js.

First, we should install react-otp-input in our application

npm i react-otp-input

Import this package into our application

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


Below you can see how to use react-otp-input in our application

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

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

Here is a list of props you can give the component.

numInputs
OTP inputs to be rendered in number.

placeholder
Give each input the intended value. This string’s length must match the number of inputs.

separator
By passing a component, you can specify a specific separator for your inputs. To add – between each input, use the syntax span>-/span>.

containerStyle
applied style or a class that was supplied to the input container.

shouldAutoFocus
Automatic input focus during initial page load

isInputNum
Only accept input that is digits.

You can see below the output