react-pwstrength-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.

Install

$ npm install react-pwstrength-bar

$ yarn add react-pwstrength-bar

Usage

import PasswordStrengthBar from 'react-pwstrength-bar';

const password ;
<PasswordStrengthBar password={password} />

Props

| Prop | Type | Default | Required | Description | Example | | --------------- | --------- | ------------------------------------------------------- | -------- | -------------------------------------------------------------------------- | ----------------------------------------------- | | password | string | '' | True | This is password that bar color and word is set based on it | jdhgfsd | | scoreWords | string[5] | ["Weak", "Medium", "Normal", "Strong", "Very Strong"] | False | determine the word that is written on the bar | any string array with length=5 | | barColors | string[5] | ["#ed5565", "#dd772c", "#f8ac59", "#2b90ef", "#25c281"] | False | determine the color of the bar | any string array with length=5 | | width | string | '100%' | False | width of the bar | you can set it by % or px like "60%" or "500px" | | height | string | '20px' | False | height of the bar | "30px" | | shapeEdge | string | "circle" | False | the shape of the edge of the bar | it can be "circle" or "square" | | backgroundColor | string | "#ddd" | False | the default color of the bar | any color like "#000" | | scoreWordClass | string | '' | False | the class to set font and any style of the word that is written on the bar | any string name of a css class |

Browser support

Tested with modern browsers.

License

the ISC license.