Package providing flexible yet powerful password input with fully customizable render
npm install react-password-indicator



You can install this package using one of these commands:
> npm i --save react-password-indicator
> yarn add react-password-indicator
This package also depends on react. Please make sure you have it installed as well.
You can play with sandbox here:

string | defaults to empty stringYou can set the default input value via this prop.
number | defaults to 0Predefined rule to check password minimal length. Uses >= operator, if you want to use > you have to use a custom rule.
number | defaults to 0Predefined rule to check password maximal length. Uses >= operator, if you want to use > you have to use a custom rule.
number | defaults to 0Predefined rule to check password for minimal number of digits. Uses >= operator, if you want to use > you have to use a custom rule.
number | defaults to 0Predefined rule to check password for minimal number of special characters (?!@#$%^&*)(+=._-}{,"'[]). Uses >= operator, if you want to use > or different special chars you have to use a custom rule.
number | defaults to 0Predefined rule to check password for minimal number of uppercase characters. Uses >= operator, if you want to use > you have to use a custom rule.
string | defaults to undefinedPredefined rule to check if password matches given string. Can be used for password confirmation.
bool | defaults to falsePredefined rule to set password as required.
function({}) | _required_You have to use this or the children to pass your custom render function. See more in Render Prop Function
booleanCan be used in controlled mode to control the visibility of password in input element.
stringCan be used in controlled mode.
function()This function is called when the input is changed and returns current input value.
function()This function is called when the input is blur event is fired and returns current input value.
function()This function is called when the value has been validated and returns the validation result.
boolean | defaults to falseIf true, the value will be validated on input blur instead of input change.
objectYou can override default messages or add messages for your custom rules here. If you dont supply message for your custom rule here, then you have to provide the message in rule itself (see rules prop).
Should have following shape:
``jsMinimal password length is ${val}
{
// Override default message for predefined rule
minLen: (val) => ,`
// If you dont need the value, string is also acceptable
maxLen: 'Password is too long!',
// Message for custom rule
myRuleKey: 'Your custom message here',
}
Array of additional custom rules in following format:
`js
{
key: 'myRuleKey', // required - each rule needs unique identification
rule: (value, ruleValue) => value.indexOf(ruleValue) > -1, // required - the validation function (has to return true or false)
// optional error message - required if you did not set the default message
message: 'Password is not valid for my custom rule',
value: '@' // allows dynamic rule value change
}
`If you don't need to change rule value dynamically, you can just skip it:
`js
{
key: 'myRuleKey', // required - each rule needs unique identification
rule: (value) => value.indexOf('@') > -1, // required - the validation function (has to return true or false)
// optional error message - required if you did not set the default message
message: 'Password is not valid for my custom rule',
}
`Render Prop Function
This is where you render whatever you want to based on the state of react-password-indicator.
You can either use the render prop:
`jsx
/ your render method implementation /} />
`Or you can pass it as the children prop if you prefer to:
`jsx
{(props) => / your render method implementation /}
`The properties of passed to this render method are listed below:
$3
####
getInputPropsThis method should be applied to the
input you render.####
getProgressPropsThis method should be applied to the
progress you render. It returns object of this shape:`js
{
value: 2, // count of passed rules
max: 7, // count of all rules
}
`####
validateThis method returns all current errors or null when called. Useful for integration with
informed.####
toggleShowPassword
> functionFunction used to toggle password visibility.
####
hasRulePassed
> function(key)Returns true if password passed the validation on this rule.
####
valid
> booleanIndicates if the password has passed all the rules.
####
isVisible
> booleanIndicates if the password is visible (input element has type or 'text' instead of 'password').
####
errors
> arrayAll the errors that occurred during password validation.
####
touched
> booleanIndicates if the password input has been changed.
####
rules
> array`All the rules currently applied to password validation.