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.
npm install --save react-password-strength
Note: react/react-dom is a peer dependency. You should be using this in a React project.
See the example repo
<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" }}
/>
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
.
- ClassName to render with default container classes
- Style object to customize container
- Minimum password length acceptable for password to be considered valid
- 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
- An array denoting the words used to describe respective score values in the UI
- A string to describe when password is too short (based on minLength prop).
- 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 including
feedback
(see docs for more properties)
- current app state (
- Props to pass down to the
input
element of the component. Things likename
,id
, etc - Protected props:
className
,onChange
,ref
,value
- Passing in
className
will append to the existing classes - The remaining props will be ignored
- Passing in
- A default value to set for the password field. If a non-empty string is provided the
changeCallback
will be called incomponentDidMount
.
- An array of strings that zxcvbn will treat as an extra dictionary.
- 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
)
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 wrapperis-strength-{0-4}
- modifier class indicating password strengthReactPasswordStrength-input
- password input fieldis-password-valid
- modifier class indicating valid passwordis-password-invalid
- modifier class indicating invalid password (only applies if password length > 0)ReactPasswordStrength-strength-bar
- color bar indicating password strengthReactPasswordStrength-strength-desc
- text indicating password strength
Access through ref
handle of ReactPasswordStrength.
clear
- reset password field to initial state