react-password-strength

A password strength indicator field for use in React projects

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-password-strength
18272.4.05 years ago8 years agoMinified + gzip package size for react-password-strength in KB

Readme

React Password Strength build status
A password strength indicator field using zxcvbn to calculate a password strength score.
Note: zxcvbn is a large library it's recommended you split the codebase to manage bundle size.
Try it live!

Install in your project

npm install --save react-password-strength
Note: react/react-dom is a peer dependency. You should be using this in a React project.

Run the example locally

See the example repo

Using the tool

<ReactPasswordStrength
  className="customClass"
  style={{ display: 'none' }}
  minLength={5}
  minScore={2}
  scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
  changeCallback={foo}
  inputProps={{ name: "password_input", autoComplete: "off", className: "form-control" }}
/>

Importing

If using ES6 imports: import ReactPasswordStrength from 'react-password-strength';
Using CommonJS require: var ReactPasswordStrength = require('react-password-strength');
Using in a Universal JS App (server-side rendering):
  • Import component from react-password-strength/dist/universal
  • Include default style from react-password-strength/dist/style.css.

Props

ClassName

  • ClassName to render with default container classes

Style

  • Style object to customize container

minLength (Default: 5)

  • Minimum password length acceptable for password to be considered valid

minScore (Default: 2)

  • Minimum score acceptable for password to be considered valid
  • Scale from 0 - 4 denoting too guessable to very unguessable
  • See zxcvbn docs for more detail

scoreWords (Default: 'weak', 'weak', 'okay', 'good', 'strong')

  • An array denoting the words used to describe respective score values in the UI

tooShortWord (Default: 'too short')

  • A string to describe when password is too short (based on minLength prop).

changeCallback

  • Callback after input has changed (and score was recomputed)
  • React Password Strength passes two objects to the callback function:
- current app state (`score`, `password`, `isValid`)
- full result produced by [zxcvbn](https://github.com/dropbox/zxcvbn) including `feedback` (see docs for more properties)

inputProps

  • Props to pass down to the input element of the component. Things like name, id, etc
  • Protected props: className, onChange, ref, value
- Passing in className will append to the existing classes - The remaining props will be ignored

defaultValue

  • A default value to set for the password field. If a non-empty string is provided the changeCallback will be called in componentDidMount.

userInputs

  • An array of strings that zxcvbn will treat as an extra dictionary.

namespaceClassName (Default: 'ReactPasswordStrength')

  • Used to control the CSS class namespace. CSS classes created by RPS will be prepended with this string.
  • If you change this prop you have to provide all CSS and it's recommended to import RSP from the universal JS build (react-password-strength/dist/universal)

Classes

All styling is applied with CSS classes to allow custom styling and overriding. Note that if you change the namespaceClassName prop the below classnames will be affected.
  • ReactPasswordStrength - namespace class and component wrapper
  • is-strength-{0-4} - modifier class indicating password strength
  • ReactPasswordStrength-input - password input field
  • is-password-valid - modifier class indicating valid password
  • is-password-invalid - modifier class indicating invalid password (only applies if password length > 0)
  • ReactPasswordStrength-strength-bar - color bar indicating password strength
  • ReactPasswordStrength-strength-desc - text indicating password strength

Functions

Access through ref handle of ReactPasswordStrength.
  • clear - reset password field to initial state