Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-password-checklist

Package Overview
Dependencies
Maintainers
0
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-password-checklist

A React Component to display the success or failure of password strength rules, ideal for registration or password reset forms.

  • 1.8.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
16K
increased by0.25%
Maintainers
0
Weekly downloads
 
Created
Source

React Password Checklist

npm version Minzipped Size NPM Downloads NPM License
Build Status Coverage Status Issues Pull Requests Twitter

A React Component to display the success or failure of password strength rules that updates as a user types.

Example

React Password Checklist Demo

Install in your project

npm install --save react-password-checklist

yarn add react-password-checklist

Note: react is a peer dependency. You should be using this in a React project.

Example Usage

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"

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/Translations

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"

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={8}
				value={password}
				valueAgain={passwordAgain}
				messages={{
					minLength: "La contraseña tiene más de 8 caracteres.",
					specialChar: "La contraseña tiene caracteres especiales.",
					number: "La contraseña tiene un número.",
					capital: "La contraseña tiene una letra mayúscula.",
					match: "Las contraseñas coinciden.",
				}}
			/>
		</form>
	)
}

Available Rules

Customize the component to display only the rules you need in the desired order you wish to display them.

minLength

Valid if the password meets the minimum length. Requires minLength prop to be included.

maxLength

Valid if the password meets the maximum length. Requires maxLength prop to be included.

specialChar

Valid if the password contains a special character from this list.

number

Valid if the password contains a number.

capital

Valid if the password contains a capital letter.

match

Valid if the password matches the confirm password valid. Requires valueAgain prop to be included.

letter

Valid if the password contains a letter (capital or lowercase)

lowercase

Valid if the password contains a lowercase letter

notEmpty

Valid if the password and confirm passwords both contain any character. Requires valueAgain prop to be included.

capitalAndLowercase

Valid if the password contains both a capital letter and lowercase letter.

noSpaces

Valid if the password does not contain a space.

Props

PropDescriptionTypeRequiredDefault
rulesRules to display in the order desired.
Options are minLength, maxLength, specialChar,
number, letter, capital, match,
lowercase, notEmpty, capitalAndLowercase, noSpaces
arrayyes
valueCurrent potential passwordstringyes
valueAgainCurrent potential password confirmationstringOnly with
match rule
minLengthMinimum Password LengthnumberOnly with
minLength rule
maxLengthMaximum Password LengthnumberOnly with
maxLength rule
specialCharsRegexRegular expression to be used to validate the specialChars ruleRegExp/[~`¿¡!#$%\^&*€£@+÷=\-\[\]\\';,/{}\(\)|\\":<>\?\.\_]/g
onChangeCallback that is triggered when the
validity of any rule changes.
function(isValid: boolean, failedRules: string[]) => {}
messagesObject with keys as rules, and values as strings to use as the message to be displayedobject
classNameClass applied to the entire componentstring
rtlapply rtl stylesbooleanfalse
hideIconRemove the SVG icon elementbooleanfalse
styleInline styles applied to the
outer component wrapper
object
iconSizeSize of ✔ or 𐄂 iconnumber18
validTextColorColor of valid textstringInherited color
invalidTextColorColor of invalid textstringInherited color opacity 0.5
validColorColor of checkmark icon. Not used with custom iconComponentsstring#4BCA81
invalidColorColor of X icon. Not used with custom iconComponentsstring#FF0033
iconComponentsOptional object containing keys of ValidIcon and InvalidIcon with a React Node to be displayed in place of icon. Both icons required if used. Example: {ValidIcon: <img src="valid.png" />, InvalidIcon: <img src="invalid.png" />}object

Available Classes

  • .valid - Valid Message
  • .invalid - Invalid Message

Contributing

PRs are welcome for additional functionality! See the Run Locally section below. Pull requests should include unit tests and potentially storybook stories to cover the updates. Thanks!

Run Locally

npm i to install dependencies.

npm run storybook

Keywords

FAQs

Package last updated on 15 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc