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:
