npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

11

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.