isomorphic-react-password-strength
v1.0.2
Published
A password strength indicator field for use in React projects
Downloads
2
Readme
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 to load react-password-strength with react-proxy or a similar tool to manage bundle size.
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
minLength={5}
minScore={2}
scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
changeCallback={foo}
inputProps={{ name: "password_input", autocomplete: "off" }}
/>
Props
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
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 likename
,id
, etc - Passing down
className
will overwrite the default classes - Protected props
onChange
,ref
, andvalue
cannot be overwritten and will be ignored if passed ininputProps
Classes
All styling is applied with CSS classes to allow custom styling and overriding.
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