React Password Strength

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

• npm install
• npm start
• open http://localhost:8080/

Using the tool

<ReactPasswordStrength
  className="customClass"
  style={{ display: 'none' }}
  minLength={5}
  minScore={2}
  as={input}
  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 ReactPasswordStrength from 'react-password-strength/dist/universal';
• Include default styling 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).

as (Default: input)

• The base element included inside the ReactPasswordStrengh container.

changeCallback

• Callback after input has changed (and score was recomputed)
• React Password Strength passes an object with the current app state (score, password, isValid) to the callback function

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 amend to the existing classes
  • The remaining props will be ignored

Classes

All styling is applied with CSS classes to allow custom styling and overriding.

• 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