Introduction
In this tutorial, we’ll walk you through the process of creating how to build OTP Input Field using reactjs from scratch. In the age of technological advancements, a frequent situation is encountering the one-time password (OTP) input component in our daily use apps and web apps, ensuring secure authentication. ReactJS is a JavaScript Framework just like Angular and VueJS Frameworks but instead, it is a more popular one. Let’s make this super simple and fun!
Preview of OTP Input
Prerequisites
- Basic Knowledge of HTML
- Basic Knowledge of CSS
- Basic Knowledge of JS including ReactJS Concepts.
50+ Interesting React JS Project ideas With Source Code from Beginner and Intermediate-level
How to Set up the ReactJS Project
Before we can start building our Input Field, we need to set up our environment. We’ll use create-react-app .
To create a new application, open your terminal or command prompt and type:
npx create-react-app OTPInput
This command will create a new folder named `OTPInput` with all the necessary files and dependencies for our React application.
The React template is finally set up and we are ready to build the clone!
Steps To Create OTP Input Field
Absolutely! Before we jump in, let’s take a moment to understand the easy steps we’re about to follow.
We’ll be Creating the Input field in two simple steps.
Folder Structure
Index.Js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import OtpInput from "react-otp-input";
// import OTPInput, { ResendOTP } from "otp-input-react";
// import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
// import "./styles.css";
const useStyles = makeStyles(theme => ({
grid: {
backgroundColor: "grey",
height: "50vh",
textAlign: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
submit: {
margin: theme.spacing(3, 0, 2)
},
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
}
}));
export default function App() {
const classes = useStyles();
const theme = useTheme();
return (
<Container component="main" maxWidth="sm">
<CssBaseline />
<div className={classes.paper}>
<Grid
container
style={{ backgroundColor: "white" }}
className={classes.grid}
justify="center"
alignItems="center"
spacing={3}
>
<Grid item container justify="center">
<Grid item container alignItems="center" direction="column">
<Grid item>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
</Grid>
<Grid item>
<Typography component="h1" variant="h5">
Verification Code
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} textAlign="center">
<Paper elevation={0}>
<Typography variant="h6">
Please enter the verification code sent to your mobile
</Typography>
</Paper>
</Grid>
<Grid
item
xs={12}
container
justify="center"
alignItems="center"
direction="column"
>
<Grid item spacing={3} justify="center">
<OtpInput
separator={
<span>
<strong>.</strong>
</span>
}
inputStyle={{
width: "3rem",
height: "3rem",
margin: "0 1rem",
fontSize: "2rem",
borderRadius: 4,
border: "1px solid rgba(0,0,0,0.3)"
}}
/>
</Grid>
<Grid item>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Verify
</Button>
</Grid>
</Grid>
</Grid>
</div>
</Container>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Dependencies
Package.json
{
"name": "react-otp-input-demo",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"@material-ui/core": "4.10.0",
"@material-ui/icons": "4.9.1",
"@material-ui/styles": "4.10.0",
"otp-input-react": "0.2.4",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-otp-input": "0.3.1",
"react-scripts": "2.0.3"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}Final Output of Project
Number Guessing Game using JavaScript
Conclusion
Congratulations, You have completed your Major Reactjs Project and further you can enhance this as per your preferences. You can deploy it on the Github, Vercel, or Netfliy platforms and make it live for your friends. Add this to your resume after adding or enhancing more functionality. You can add further functionalities to your websites.
Thanks for reading this article, We will be posting a lot more articles from intermediate to advanced topics in this coming year and we will be unboxing the mystery of web and software engineering in general, from the Backend to the Frontend.
I hope you liked this Tutorial and must have learned Something new. If you have any questions regarding this feel free to drop your comments below and contact our team on Instagram @Codewithrandom.
Happy Coding!!!
