Have ideas to improve npm?Join in the discussion! »

    react-password-indicator

    1.0.0 • Public • Published

    npm version License: MIT Build Status Coverage Status

    React Password Indicator

    Package providing flexible yet powerful password input with fully customizable render.

    Installation

    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.

    Usage

    Basic usage and demo

    You can play with sandbox here:

    Edit o772lmq6

    Props

    defaultValue

    string | defaults to empty string

    You can set the default input value via this prop.

    minLen

    number | defaults to 0

    Predefined rule to check password minimal length. Uses >= operator, if you want to use > you have to use a custom rule.

    maxLen

    number | defaults to 0

    Predefined rule to check password maximal length. Uses >= operator, if you want to use > you have to use a custom rule.

    digits

    number | defaults to 0

    Predefined rule to check password for minimal number of digits. Uses >= operator, if you want to use > you have to use a custom rule.

    specialChars

    number | defaults to 0

    Predefined 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.

    uppercaseChars

    number | defaults to 0

    Predefined rule to check password for minimal number of uppercase characters. Uses >= operator, if you want to use > you have to use a custom rule.

    mustMatch

    string | defaults to undefined

    Predefined rule to check if password matches given string. Can be used for password confirmation.

    required

    bool | defaults to false

    Predefined rule to set password as required.

    render

    function({}) | required

    You have to use this or the children to pass your custom render function. See more in Render Prop Function

    isVisible

    boolean

    Can be used in controlled mode to control the visibility of password in input element.

    value

    string

    Can be used in controlled mode.

    onChange

    function()

    This function is called when the input is changed and returns current input value.

    onBlur

    function()

    This function is called when the input is blur event is fired and returns current input value.

    onValidate

    function()

    This function is called when the value has been validated and returns the validation result.

    validateOnBlur

    boolean | defaults to false

    If true, the value will be validated on input blur instead of input change.

    defaultMessages

    object

    You 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:

    {
       // Override default message for predefined rule
      minLen: (val) => `Minimal password length is ${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',
    }

    rules

    array

    Array of additional custom rules in following format:

    {
      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:

    {
      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:

    <PasswordInput render={(props) => /* your render method implementation */} />

    Or you can pass it as the children prop if you prefer to:

    <PasswordInput>{(props) => /* your render method implementation */}</PasswordInput>

    The properties of passed to this render method are listed below:

    Render props passed to the render function

    getInputProps

    This method should be applied to the input you render.

    getProgressProps

    This method should be applied to the progress you render. It returns object of this shape:

    {
      value: 2, // count of passed rules
      max: 7, // count of all rules
    }

    validate

    This method returns all current errors or null when called. Useful for integration with informed.

    toggleShowPassword

    function

    Function used to toggle password visibility.

    hasRulePassed

    function(key)

    Returns true if password passed the validation on this rule.

    valid

    boolean

    Indicates if the password has passed all the rules.

    isVisible

    boolean

    Indicates if the password is visible (input element has type or 'text' instead of 'password').

    errors

    array

    All the errors that occurred during password validation.

    touched

    boolean

    Indicates if the password input has been changed.

    rules

    array

    All the rules currently applied to password validation.

    License

    MIT

    Install

    npm i react-password-indicator

    DownloadsWeekly Downloads

    263

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    83.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar