try-react-password-input

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.