🚀 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

| Prop | Description | Type | Required | Default | |-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------|---------------------------------------------------------------| | rules | Array of rules to validate and display. Options: minLength, maxLength, specialChar, number, letter, capital, match, lowercase, notEmpty, capitalAndLowercase, noSpaces | array | yes | | | value | Current password value | string | yes | | | valueAgain | Password confirmation value (required for match and notEmpty rules) | string | Only with match/notEmpty | | | minLength | Minimum password length (required for minLength rule) | number | Only with minLength rule | | | maxLength | Maximum password length (required for maxLength rule) | number | Only with maxLength rule | | | specialCharsRegex | Custom regex for special character validation | RegExp | | /[~¿¡!#$%^&*€£@+÷=-[]\';,/{}()|\":<>?._]/g | | onChange | Callback triggered when rule validity changes. Receives(isValid: boolean, failedRules: string[]) | function | |(isValid, failedRules) => {} | | messages | Custom messages for each rule (object with rule keys and string values) | object | | | | className | Custom class for the component wrapper | string | | | | rtl | Enable right-to-left layout | boolean | | false | | hideIcon | Hide the default SVG icons | boolean | | false | | style | Inline styles for the component wrapper | object | | | | iconSize | Size of the checkmark/X icons | number | | 18 | | validTextColor | Color for valid rule text | string | | Inherited | | invalidTextColor | Color for invalid rule text | string | | Inherited (opacity 0.5) | | validColor | Color for the checkmark icon (not used with custom icons) | string | |#4BCA81 | | invalidColor | Color for the X icon (not used with custom icons) | string | |#FF0033 | | iconComponents | Custom icons:{ ValidIcon: , InvalidIcon: }` | object | | | | renderAsMessagesOnly | Enable line instead of List | Boolean | | false | | messageOnlyColor | Color for single line messages | String | | red | | messageOnlyPrefix | Add prefix for single line messages | String | | New password must contain at least: |

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