A React module to render colored bars based on password strength
The modules takes password as an prop and checks following rules on it
1. hasDigits = (string) => /\d/.test(string);
2. hasUppercase = (string) => /[A-Z]/.test(string);
3. hasLowercase = (string) => /[a-z]/.test(string);
4. hasEightLength = (string) => (string.length >= 8 ? true : false);
5. hasSpecialCharacter = (string) =>
/._[/!`~\_;'+=@#$%^&_()\]\\,.?":{}|<>-]/.test(string);
Password is categorized into 4 types.
- Strong: If all above rules are passed, password will be declared as Strong and all 4 bars will get Green
- Good: If any 1 of the rules failed password will be declared as Good and 3 of the bars will get Blue
- Normal: If any 2 of the rules failed password will be declared as Normal and 2 of the bars will get Orange
- Weak: If any 3 of the rules failed password will be declared as Weak and 1 of the bars will get Red
npm install password-strength-bars or yarn add password-strength-bars
import PasswordStrengthBar from "password-strength-bars";
<PasswordStrengthBar password={"SamplePass123!"} />
Name | Type | Default | Description |
---|---|---|---|
password | String | "" | password for which modules will check the strength and will render bars (lines) |
containerClass | String | "" | Container className to modify any style |
showTitle | Boolean | true | If password title need to be shown below the bars |
strengthTitles | Object | { weak: "Weak",normal: "Normal", good: "Good", strong: "Strong"} | You can mofify title of the password by passing strengthTitles object |