In this article, we are going to learn how we can add password checklist 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 checklist we are going to use the react-password-checklist package. The react-password-checklist package helps us to integrate the password checklist in our app. So first, we will install the react-password-checklist package and then we will add a checklist 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-password-checklist package using the below command:
npm i react-password-checklist
Project Structure: It will look like this
Adding the Password Checklist: After installing the package we can easily add a checklist on any page in our app. For this example, we are going to add a checklist to our homepage.
Add the below content in the App.js file:
App.js
import React, {useState} from "react"import PasswordChecklist from "react-password-checklist" export default function PasswordGfg(){ const [password, setPassword] = useState("") const [passwordAgain, setPasswordAgain] = useState("") return ( <form> <h3>ReactJs Password Checklist</h3> <label>Password:</label> <input type="password" onChange={e => setPassword(e.target.value)}> </input> <label>Password Again:</label> <input type="password" onChange={e => setPasswordAgain(e.target.value)}> </input> <PasswordChecklist rules={["minLength","specialChar", "number","capital","match"]} minLength={5} value={password} valueAgain={passwordAgain} /> </form> ) }; |
Explanation: In the above example first, we are importing the PasswordChecklist component and after that, we are using the installed component in a new function to add our checklist. We are also using useState hook to store the value of the password.
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
