Create your Custom Otp Component Using React Ref

At present mostly web as well as app applications provides authentication using OTP (One time Password). One day while working on a ReactJS Project in my company, I got the same challenge.

In this article I am going to create custom OTP(One Time Password) component in React.js. Which you can include as a child component in your react application.

React Refs
Refs provide a way to access DOM nodes or React elements created in the render method. To know more about react refs please go through the following link: https://reactjs.org/docs/refs-and-the-dom.html

Let start to create custom otp component. Firstly crate a new react app with the help of npx create-react-app react-otp.

Firstly create a new file OtpComp.js inside your src folder and write the following code inside it.

//////////////////OtpComp.js////////////////////////////
import React from "react";
import ReactDOM from "react-dom";
import './Otp.css';
class OtpComp extends React.Component {
constructor(props) {
super(props);
let otpArray = (new Array(this.props.numInputs)).fill("");
this.state = {
otp: otpArray
};
this.otp0 = React.createRef();
}
componentDidMount() {
console.log(this.refs)
this.refs.otp0.focus();
}
handelChange(event, index){
let fieldValue =  (/^[0-9]{1,1}$/.test(+event.target.value))?event.target.value:""
let field = event.target;
let otpFields = this.state.otp;
otpFields[index] = fieldValue;
console.log(otpFields)
this.setState({otp:otpFields})
this.props.handleChange(this.state.otp.join(""))
if (fieldValue!="") {
event.preventDefault();
let next = this.refs[field.name].nextSibling;
if (next && next.tagName === "INPUT") {
this.refs[field.name].nextSibling.focus();
}
}
}
handleKeyDown(event, index){
if (event.keyCode===8  && event.target.value.length===0) {
event.preventDefault();
let previous = this.refs[event.target.name].previousSibling;
console.log(previous)
if (previous && previous.tagName === "INPUT") {
this.refs[event.target.name].previousSibling.focus();
}
}
}
render() {
return (
<div>
<h1>Focus next input on Enter</h1>
{[...Array(this.props.numInputs)].map((otp, index)=>{
return (
<input type="text"
key={index}
name={'otp'+index}
maxLength="1"
ref={'otp'+index}
onKeyDown = {(event)=>this.handleKeyDown(event, index)}
onChange = {(event)=>this.handelChange(event, index)}
value = {this.state.otp[index]}
className="otp-input-fields"
/>
)
})}
</div>
);
}
}
export default OtpComp;
/////////////Otp.css//////////////////////
.otp-input-fields {
      margin-right: 10px;
      width: 30px;
      text-align: center;
}

Now you can use this component in your application like this.

import React, {useState} from 'react';
import OtpComp from './OtpComp';
function App() {
const handleChange = value =>{
console.log('value insdie handle change', value)
}
return (
<div className="App">
<OtpComp numInputs={5} handleChange = {handleChange} />
</div>
);
}
export default App;

To tell us about your requirement please visit the contact page at https://www.appingenious.com/ or please fill the form: https://docs.google.com/forms/d/1uh343ab8uwVhCpozi_etFyV67f6zVoIiMlrYKLwOgnE/prefill