A password strength indicator field for use in React projects
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):
react-password-strength/dist/universal
react-password-strength/dist/style.css
.score
, password
, isValid
)feedback
(see docs for more properties)input
element of the component. Things like name
, id
, etcclassName
, onChange
, ref
, value
className
will append to the existing classeschangeCallback
will be called in componentDidMount
.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 strengthAccess through ref
handle of ReactPasswordStrength.
clear
- reset password field to initial state