How to create Password Checklist in ReactJS ?

Last Updated : 13 Nov, 2023

The password checklist in the React JS app is a list of password validation steps or conditions that should be fulfilled. These conditions are automatically checked when the password is input in the input field.

Prerequisites:

Approach too create Password Checklist:

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 into our app. So first, we will install the react-password-checklist package and then we will add a checklist on our homepage.

Steps to Create ReactJS Application:

Step 1: You can create a new ReactJS project using the below command:

npx create-react-app gfg

Step 2: Move to the project directory,

cd gfg

Step 3: Now we will install the react-password-checklist package using the below command

npm i react-password-checklist

Project Structure:

Project Structure

The updated list of dependencies in package.json file.

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-password-checklist": "^1.5.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Example: This example implements a password check list using the react-password-checklist package.

App.js

// Filename - 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>
    );
}