Simple and easy to use password validator for React
View examplesTo get started with RPV, install the dependency by running
Add RPV's styles into your App.css
You can run the following example into your project
RPV counts with the follwing rules to validate passwords
Verify if the provided password met the min length property
Verify if the provided password met the max length property
Verify if the password contains at least one special character
Verify if the password contains at least one number
Verify if the password contains at least one capital letter
Verify if the password matches with confirmedPassword value
Verify if the password contains at least one lowercase letter
Verify if the password is not empty
Verify if the password contains forbidden words such as user’s name, lastname, etc…
You can pass the follwing props
| Prop | Description | Type | Required | Default |
|---|---|---|---|---|
| rules | Rules that can be passed to check password strength. The rules that can be passed are minLength, maxLength, specialChar, number, capital, matches, lowercase, notEmpty, shouldNotContains | <String>Array | true | |
| minLength | Min length allowed for the password | number | false | 8 |
| maxLength | Max length allowed for the password | number | false | 32 |
| iconSize | Size of the icons | number | false | 16 |
| password | Password typed for the user | string | true | |
| confirmedPassword | Password re-entered for the user. Required if matches option is passed into the rules array | string | ||
| config | Configuration object | object | false | |
| onValidatorChange | Function that will recieve the RPV status | function | true |
You can pass the follwing props
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
| customText | Used for multi languages porpuses | ICostumText | false | |
| showProgressBar | Display a progress bar, based on those rules that are being completed | boolean | false | false |
| showPasswordSuggestion | Enables passwords suggestions for the user. User can generate different suggestions depending on their needs. | boolean | false | false |
| classNames | Let the developer specify classes for different elements of RPV | IClassNames | false | undefined |
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
| minLength | Customize error and success texts for minLength rule | IRuleCustomize | true | undefined |
| maxLength | Customize error and success texts for maxLength rule | IRuleCustomize | true | undefined |
| specialChar | Customize error and success texts for specialChar rule | IRuleCustomize | true | undefined |
| number | Customize error and success texts for number rule | IRuleCustomize | true | undefined |
| capital | Customize error and success texts for capital rule | IRuleCustomize | true | undefined |
| matches | Customize error and success texts for matches rule | IRuleCustomize | true | undefined |
| lowercase | Customize error and success texts for lowercase rule | IRuleCustomize | true | undefined |
| notEmpty | Customize error and success texts for notEmpty rule | IRuleCustomize | true | undefined |
| shouldNotContain | Customize error and success texts for shouldNotContain rule | IRuleCustomize | true | undefined |
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
| successText | Message showed up when the password mets the rule | string | true | undefined |
| errorText | Message showed up when the password doesn't met the rule | string | true | undefined |
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
| containerClass | Specified classes will be applied to RPV container element. Classes must be passed as a single string. i.e: my-class my-other-class | string | true | undefined |
| gridClass | Specified classes will be applied to RPV grid element. Classes must be passed as a single string. i.e: my-class my-other-class | string | true | undefined |
| ruleClass | Specified classes will be applied to RPV rule element, each rule element contains one rule inside. Classes must be passed as a single string. i.e: my-class my-other-class | string | true | undefined |
| validProgressBarClass | Specified classes will be applied to RPV valid progress bar element. Classes must be passed as a single string. i.e: my-class my-other-class | string | true | undefined |
| invalidProgressBarClass | Specified classes will be applied to RPV invalid progress bar element. Classes must be passed as a single string. i.e: my-class my-other-class | string | true | undefined |
The following example is a complete configuration usage
Custom examples for RPV
Password suggestions are based on maxLength prop. If you set maxLength to 16, password suggestion function, will suggest passwords of 16 -1 characters
The classes used for this example, are classes from TailwindCSS
You can also check:
If you are having troubles or want to discuss something else, feel free to let me know. Write at oscar.morales.developer@gmail.com