React Password Validator

A reusable React password validator component with Tailwind CSS and Lucide icons. Shows password validation rules and a strength indicator.

Features

• Validates passwords against:
  • 8–14 characters
  • At least one lowercase letter
  • At least one uppercase letter
  • At least one number
  • At least one symbol
• Password strength indicator: weak / medium / strong
• Customizable styling via Tailwind CSS className props
• Fully written in TypeScript
• Peer dependency: react >=18

Installation

npm install @shafnas/react-password-validator lucide-react

or

yarn add @shafnas/react-password-validator lucide-react

import { useState } from "react";
import { PasswordValidator, usePasswordValidation } from "react-password-validator";

export default function App() {
  const [password, setPassword] = useState("");

  const validation = usePasswordValidation(password);

  const handleSubmit = () => {
    if (validation.valid) {
      alert("Password is valid!");
    } else {
      alert("Password is invalid!");
    }
  };

  return (
    <div className="max-w-md mx-auto p-4 space-y-4">
      <input
        type="password"
        placeholder="Enter password"
        className="border p-2 rounded w-full"
        onChange={(e) => setPassword(e.target.value)}
      />

      <PasswordValidator password={password} />

      <button
        className="px-4 py-2 bg-blue-600 text-white rounded"
        onClick={handleSubmit}
      >
        Submit
      </button>
    </div>
  );
}

| Prop | Type | Default | Description | | ---------------------- | -------- | ------- | ------------------------------------------ | | password | string | — | The password to validate | | className | string | "" | Custom class for the container | | itemClassName | string | "" | Custom class for each validation item | | strengthBarClassName | string | "" | Custom class for the password strength bar |

const validation = usePasswordValidation(password);

{
  length: boolean;
  lowercase: boolean;
  uppercase: boolean;
  number: boolean;
  symbol: boolean;
  valid: boolean; // true if all rules pass
}