Package detail

🔒 React Advanced Password Checklist

A highly customizable React component for real-time password strength validation.
Instantly display which password requirements are met as users type, improving both security and user experience.

Install Package	npm i react-advanced-pwcl <button onclick="navigator.clipboard.writeText('npm i react-advanced-pwcl')" style="margin-left:8px;padding:2px 8px;font-size:0.9em;cursor:pointer;">Copy</button>
Version
License
Repository	GitHub →
React Support
TypeScript
Bundle Size
Publisher	mdsabbiralmamon

🚀 Features

• Real-time validation: Instantly shows which password rules are met.
• Highly customizable: Control rules, messages, icons, colors, and layout.
• Localization support: Easily provide custom messages or translations.
• TypeScript ready: Full TypeScript support and types.
• RTL support: Right-to-left layout for internationalization.
• Lightweight: Minimal bundle size.

🖥️ Demo

Render List

Text Only Render

📦 Installation

Install via npm:

npm install react-advanced-pwcl

Or with yarn:

yarn add react-advanced-pwcl

Note: react is a peer dependency. Use this package within a React project.

⚡ Basic Usage

import React, { useState } from "react";
import PasswordChecklist from "react-advanced-pwcl";

const SignUp = () => {
    const [password, setPassword] = useState("");
    const [passwordAgain, setPasswordAgain] = useState("");
    return (
        <form>
            <label>Password:</label>
            <input type="password" onChange={e => setPassword(e.target.value)} />
            <label>Password Again:</label>
            <input type="password" onChange={e => setPasswordAgain(e.target.value)} />

            <PasswordChecklist
                rules={["minLength", "specialChar", "number", "capital", "match"]}
                minLength={5}
                value={password}
                valueAgain={passwordAgain}
                onChange={isValid => {}}
            />
        </form>
    );
};

🌍 Custom Messages & Localization

Provide custom messages or translations for each rule:

<PasswordChecklist
    rules={["minLength", "specialChar", "number", "capital", "match"]}
    minLength={8}
    value={password}
    valueAgain={passwordAgain}
    messages={{
        minLength: "Password has at least 8 characters.",
        specialChar: "Password contains a special character.",
        number: "Password includes a number.",
        capital: "Password contains an uppercase letter.",
        match: "Passwords match.",
    }}
/>

🛡️ Supported Rules

Configure the checklist to display only the rules you require, in any order:

• minLength: Password meets the minimum length (minLength prop required)
• maxLength: Password does not exceed the maximum length (maxLength prop required)
• specialChar: Contains at least one special character (see list)
• number: Contains at least one numeric digit
• capital: Contains at least one uppercase letter
• match: Password and confirmation match (valueAgain prop required)
• letter: Contains at least one letter (uppercase or lowercase)
• lowercase: Contains at least one lowercase letter
• notEmpty: Both password fields are non-empty (valueAgain prop required)
• capitalAndLowercase: Contains both uppercase and lowercase letters
• noSpaces: Does not contain spaces

⚙️ Component Props

CSS Classes

• .valid – Applied to valid rule messages
• .invalid – Applied to invalid rule messages

Contributing

Contributions are welcome! Please submit pull requests with clear descriptions and include relevant unit tests and, if applicable, Storybook stories.

Local Development

Install dependencies:

npm install

Start Storybook for local development:

npm run storybook