@xho/react-password-meter

React Password Strength Meter

A customizable, lightweight password strength meter component for React applications.

Features

🎨 Multiple built-in themes (Classic, Emoji, Minimal)
💪 Comprehensive strength calculation
🛠 Fully customizable themes and scoring
📦 Lightweight with zero dependencies
💻 Written in TypeScript
⚡️ Easy to integrate
🔒 Common password detection

Installation

npm install @xho/react-password-meter

or

yarn add @xho/react-password-meter

Usage

Basic Usage

import { PasswordStrengthMeter } from "@xho/react-password-meter";

function App() {
  return <PasswordStrengthMeter password="yourpassword" theme="classicTheme" />;
}

With Custom Theme

import { PasswordStrengthMeter, ThemeConfig } from "@xho/react-password-meter";

const customTheme: ThemeConfig = {
  weak: { color: "#ff4d4d", label: "Too Weak" },
  fair: { color: "#ffaa00", label: "Getting Better" },
  good: { color: "#2196f3", label: "Almost There" },
  strong: { color: "#4caf50", label: "Perfect!" },
};

function App() {
  return (
    <PasswordStrengthMeter
      password="yourpassword"
      theme={customTheme}
      onChange={({ score, level }) => console.log(score, level)}
    />
  );
}

Props

Prop	Type	Default	Description
password	string	""	The password to evaluate
theme	ThemeName | ThemeConfig	"classicTheme"	Theme configuration
showLabel	boolean	true	Whether to show strength label
className	string	""	Additional CSS classes
onChange	(result: StrengthResult) => void	-	Callback when strength changes
strengthCalculator	(password: string) => number	Built-in calculator	Custom strength calculation function