React-pwstrength-bar NPM

react-pwstrength-bar

A React component that displays the password strength bar

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.

$ npm install react-pwstrength-bar

$ yarn add react-pwstrength-bar

import PasswordStrengthBar from 'react-pwstrength-bar';

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

Prop	Type	Default	Required	Description	Example
password	string	''	True	This is password that bar color and word is set based on it	`jdhgfsd`
scoreWords	string5	"Weak", "Medium", "Normal", "Strong", "Very Strong"	False	determine the word that is written on the bar	any string array with length=5
barColors	string5	"#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

Tested with modern browsers.

the ISC license.

2 years ago

2 years ago

2 years ago