README
react-password-strength-bar
A React component that displays the password strength bar
Note
- This package is based on zxcvbn.
zxcvbn
is a powerful library, but its size is very large. I recommend you use this package by Code-Splitting. - The input tag is not included. If you want to include the input tag, use the mmw/react-password-strength package.
Install
$ npm install react-password-strength-bar
$ yarn add react-password-strength-bar
Usage
import PasswordStrengthBar from 'react-password-strength-bar';
const { password } = this.state;
<PasswordStrengthBar password={password} />
Props
: string className
- isRequired: false
- default: undefined
: object style
- isRequired: false
- default: undefined
: string scoreWordClassName
- isRequired: false
- default: undefined
: object scoreWordStyle
- isRequired: false
- default: undefined
: string password
- isRequired: true
- default: ''
: string[] userInputs
- isRequired: false
- default: []
: string[] barColors
- isRequired: false
- default: ['#ddd', '#ef4836', '#f6b44d', '#2b90ef', '#25c281']
: string[] scoreWords
- isRequired: false
- default: ['weak', 'weak', 'okay', 'good', 'strong']
: number minLength
- isRequired: false
- default: 4
: string shortScoreWord
- isRequired: false
- default: 'too short'
: (score) => void onChangeScore
- isRequired: false
- default: undefined
Browser support
Tested with modern browsers.
License
the MIT license.