In this article, we are going to learn how we can add Code Input in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.
Approach: To add our code input we are going to use the react-code-input package. The react-code-input package helps us to integrate the code input in our app. So first, we will install the react-code-input package and then we will add a code input on our homepage.
Create ReactJs Application: You can create a new ReactJs project using the below command:
npx create-react-app gfg
Install the required package: Now we will install the react-code-input package using the below command:
npm i react-code-input
Project Structure: It will look like this.
Adding the Code Input: After installing the package we can easily add a code input on any page in our app. For this example, we are going to add a code input to our homepage.
Add the below content in the App.js file:
Javascript
import React from 'react'; import ReactCodeInput from 'react-code-input'; Â Â export default function GfgInput() { Â Â const props = { Â Â Â Â inputStyle: { Â Â Â Â Â Â fontFamily: 'monospace', Â Â Â Â Â Â margin:Â '4px', Â Â Â Â Â Â MozAppearance: 'textfield', Â Â Â Â Â Â width: '40px', Â Â Â Â Â Â borderRadius: '3px', Â Â Â Â Â Â fontSize: '14px', Â Â Â Â Â Â height: '26px', Â Â Â Â Â Â paddingLeft: '7px', Â Â Â Â Â Â backgroundColor: 'white', Â Â Â Â Â Â color: 'lightskyblue', Â Â Â Â Â Â border: '1px solid lightskyblue'Â Â Â Â }, Â Â Â Â inputStyleInvalid: { Â Â Â Â Â Â fontFamily: 'monospace', Â Â Â Â Â Â margin:Â '4px', Â Â Â Â Â Â MozAppearance: 'textfield', Â Â Â Â Â Â width: '40px', Â Â Â Â Â Â borderRadius: '3px', Â Â Â Â Â Â fontSize: '14px', Â Â Â Â Â Â height: '26px', Â Â Â Â Â Â paddingLeft: '7px', Â Â Â Â Â Â backgroundColor: 'black', Â Â Â Â Â Â color: 'red', Â Â Â Â Â Â border: '1px solid red'Â Â Â Â } Â Â } Â Â Â Â return ( Â Â Â Â <div> Â Â Â Â Â Â <h2>neveropen React - Code Input</h2> Â Â Â Â Â Â <ReactCodeInput type='number' fields={6} {...props}/> Â Â Â Â </div> Â Â ); } |
Explanation: In the above example first, we are importing the ReactCodeInput component and adding some styling in a new variable named props. After that, we are adding our code input using the installed package.
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
