try-react-password-input

    1.0.0 • Public • Published

    try-react-password-input

    npm version

    A password input component which accepts certain qualifications for password to valid as props and then returns whether password is valid or in the callback

    For validations we have used password-validator module

    Installation

    npm install try-react-password-input
    

    How to use it ?

    import Password from 'try-react-password-input';
    
    handleChange(passwordValid, password) {
      console.log(passwordValid, password);
    }
    
    <Password
      uppercase
      lowercase
      digits
      onChange={this.handleChange}
      className="password-input"
    />
    

    Password Validations available pas props

    Validation type Description
    uppercase Boolean specifies whether password should contain uppercase characters
    lowercase Boolean specifies whether password should contain lowercase characters
    digits Boolean specifies that password should contain digits
    noSpaces Boolean specifies that password should not contain any spaces
    max Number specifies the maximum number characters in password no max chars in password, unless specified
    min Number specifies the minimum number characters in password no min chars in password, unless specified
    symbols Boolean specifies whether or not password should contain symbols

    Note: All the above props/validation if Boolean has default value as false, and others are undefined.

    Other Props

    Prop Type Default Description
    value String empty string value of password text
    onChange Function empty funtion method called everytime value is changed in password input field, has passwordValidity and password value in arguments (if list is true, receives array of keys as list invalidities which are spelled same as props)
    list Boolean True specifies whether validation api should return list of failed validations or not
    showValidity Boolean True specifies if the validity indicator needs to be shown to indicate password is valid or not (list showing all the validities if list is true else and small indicator showing password valid or not)
    showPassword Boolean False specifies whether show password button needs to be shown or not
    className String empty string adds class to the root element
    inputClass String empty string adds class to the input element

    Note : All the other default props such as id, etc. are accpted by default if they are not one of the props listed above such as onChange.

    Install

    npm i try-react-password-input

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • anshul_sahni