React-password-strength-zaratan NPM

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