# react-password-checklist > A React Component to display the success or failure of password strength rules, ideal for registration or password reset forms. Latest version **1.8.1** (published 2024-10-15) · MIT license · 0 weekly downloads ## Install ```sh npm install react-password-checklist pnpm add react-password-checklist yarn add react-password-checklist bun add react-password-checklist ``` ## Health **Score 40/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.8.1 | | Published | 2024-10-15 | | First published | 2020-08-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 24.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 73 | | Author | Sators | | Maintainers | sators | | Keywords | password, strength, indicator, meter, validator, validation, form, signup, account, creation, signin, react, checker, strong, capital, number, symbol, length, create account, password reset, check password strength, password strength checker, strength checker, password checker, password checker strength, strength password checker, check-password-strength, password-strength-checker, strength-checker, password-checker, password-checker-strength, strength-password-checker, pass-strength | ## Links - npm: https://www.npmjs.com/package/react-password-checklist - Repository: https://github.com/sators/react-password-checklist - Homepage: https://github.com/sators/react-password-checklist#readme - Issues: https://github.com/sators/react-password-checklist/issues - npm.io page: https://npm.io/package/react-password-checklist ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.8.1 (latest) — 2024-10-15 - 1.8.0 — 2024-08-05 - 1.7.0 — 2024-08-03 - 1.6.0 — 2024-05-09 - 1.5.1 — 2024-02-16 - 1.5.0 — 2023-10-19 - 1.4.3 — 2022-12-02 - 1.4.2 — 2022-09-29 - 1.4.1 — 2022-08-18 - 1.4.0 — 2022-07-20 - 1.3.3 — 2021-12-22 - 1.3.2 — 2021-11-02 - 1.3.1 — 2021-09-12 - 1.3.0 — 2021-09-11 - 1.2.1 — 2021-07-21 - … 13 more at https://npm.io/package/react-password-checklist/versions ## README # React Password Checklist [![npm version](https://img.shields.io/npm/v/react-password-checklist)](https://www.npmjs.com/package/react-password-checklist) ![Minzipped Size](https://img.shields.io/bundlephobia/minzip/react-password-checklist) ![NPM Downloads](https://img.shields.io/npm/dw/react-password-checklist) ![NPM License](https://img.shields.io/npm/l/react-password-checklist)
[![Build Status](https://api.travis-ci.com/sators/react-password-checklist.svg?branch=master&status=passed)](https://app.travis-ci.com/github/sators/react-password-checklist) [![Coverage Status](https://coveralls.io/repos/github/sators/react-password-checklist/badge.svg?branch=master)](https://coveralls.io/github/sators/react-password-checklist?branch=master) [![Issues](https://img.shields.io/github/issues/sators/react-password-checklist)](https://github.com/sators/react-password-checklist/issues) [![Pull Requests](https://img.shields.io/github/issues-pr/sators/react-password-checklist)](https://github.com/sators/react-password-checklist/pulls) [![Twitter](https://img.shields.io/twitter/follow/sators.svg?style=social&label=@sators)](https://twitter.com/sators) A React Component to display the success or failure of password strength rules that updates as a user types. ## Example ![React Password Checklist Demo](demo/demo.gif) ## 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 (
setPassword(e.target.value)}> setPasswordAgain(e.target.value)}> {}} /> ) } ``` ### 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 (
setPassword(e.target.value)}> setPasswordAgain(e.target.value)}> ) } ``` ## 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](https://github.com/sators/react-password-checklist/blob/master/src/index.tsx#L60). #### 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 | Prop | Description | Type | Required | Default | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------- | ------------------------------------------------------------- | | rules | Rules to display in the order desired.
Options are `minLength`, `maxLength`, `specialChar`,
`number`, `letter`, `capital`, `match`,
`lowercase`, `notEmpty`, `capitalAndLowercase`, `noSpaces` | array | yes | | value | Current potential password | string | yes | | valueAgain | Current potential password confirmation | string | Only with
`match` rule | | minLength | Minimum Password Length | number | Only with
`minLength` rule | | maxLength | Maximum Password Length | number | Only with
`maxLength` rule | | specialCharsRegex | Regular expression to be used to validate the specialChars rule | RegExp | | `` /[~`¿¡!#$%\^&*€£@+÷=\-\[\]\\';,/{}\(\)\|\\":<>\?\.\_]/g `` | | onChange | Callback that is triggered when the
validity of any rule changes. | function | | `(isValid: boolean, failedRules: string[]) => {}` | | messages | Object with keys as rules, and values as strings to use as the message to be displayed | object | | | className | Class applied to the entire component | string | | | rtl | apply rtl styles | boolean | | false | | hideIcon | Remove the SVG icon element | boolean | | false | | style | Inline styles applied to the
outer component wrapper | object | | | iconSize | Size of ✔ or 𐄂 icon | number | | `18` | | validTextColor | Color of valid text | string | | Inherited color | | invalidTextColor | Color of invalid text | string | | Inherited color opacity 0.5 | | validColor | Color of checkmark icon. Not used with custom `iconComponents` | string | | `#4BCA81` | | invalidColor | Color of X icon. Not used with custom `iconComponents` | string | | `#FF0033` | | iconComponents | Optional 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: , InvalidIcon: }` | 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` --- _Source: https://npm.io/package/react-password-checklist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._