react-password-secure-indicator
v1.0.12
Published
A customizable React component to visually indicate password strength based on default or user-defined validation rules. Supports custom validation rules and color schemes.
Downloads
40
Readme
react-password-secure-indicator
react-password-secure-indicator
is a customizable React component for displaying password strength and validation feedback. It provides visual indicators for different password strength levels and allows for custom validation rules and styles.
Features
- Password Strength Indicator: Visual feedback for password strength with color-coded bars.
- Customizable Validations: Define custom validation rules and error messages.
- Color Customization: Customize the color scheme for different strength levels.
- Accessibility: Includes ARIA attributes for better accessibility.
- Error Messaging: Displays error messages for invalid passwords.
Installation
You can install this package using one of these commands:
npm i --save react-password-indicator
yarn add react-password-indicator
This package also depends on react
. Please make sure you have it installed as well.
Usage
Here's a basic example of how to use the PasswordStrength component:
import React, { useState } from 'react';
import PasswordStrength from 'react-password-secure-indicator';
const MyComponent = () => {
const [password, setPassword] = useState('');
return (
<div>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
/>
<PasswordStrength
password={password}
errorMsg="Password is required"
errorMessages={{
tooShort: "Password is too short",
uppercase: "Password must contain at least one uppercase letter",
lowercase: "Password must contain at least one lowercase letter",
numeric: "Password must contain at least one numeric digit",
specialChar: "Password must contain at least one special character",
lengthRequirement: "Password length must be greater than 8 characters.",
}}
colors={{
tooShort: '#FFCC00', // Example color for "Too Short"
weak: '#FF3333', // Example color for "Weak"
strong: '#33CC33', // Example color for "Strong"
default: '#CCCCCC', // Example color for "Default"
}}
isCustomValidations={{
tooShort: {
regex: /^.{0,7}$/,
errorMessage: "Password is too short",
},
weak: {
regex: /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#*$%^&+=]).{8,}$/,
errorMessage: "Password is weak",
},
strong: {
regex: /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#*$%^&+=]).{12,}$/,
errorMessage: "Password is strong",
},
}}
/>
</div>
);
};
export default MyComponent;
Props
password
string
| required
The password string that needs to be evaluated.
errorMsg
string
| optional
An optional custom error message to display if the password is empty or invalid.
className
string
| optional
Optional custom CSS class name for styling.
errorMessages
object
| optional
Custom error messages for different validation criteria.
tooShort
: Message for passwords shorter than 8 characters.uppercase
: Message for missing uppercase letters.lowercase
: Message for missing lowercase letters.numeric
: Message for missing numeric digits.specialChar
: Message for missing special characters.lengthRequirement
: Message for passwords that don't meet the length requirement.
isCustomValidations
object
| optional
Custom validation rules for password strength.
tooShort
:{ regex: RegExp; errorMessage: string }
- Rule for passwords that are too short.weak
:{ regex: RegExp; errorMessage: string }
- Rule for weak passwords.strong
:{ regex: RegExp; errorMessage: string }
- Rule for strong passwords.
colors
object
| optional
Custom colors for different password strength levels.
tooShort
: Color for "Too Short" indication.weak
: Color for "Weak" indication.strong
: Color for "Strong" indication.default
: Color for default state.
License
This package is licensed under the MIT License. See the LICENSE file for more information.