password-requirements

A simple React component to display live, dynamic password requirements.

Install

npm i password-requirements

Usage

import PasswordRequirements from 'password-requirements';


function SignupPage() {
    const [userPassword, setUserPassword] = useState('');

    const validationRules = {
        requiredLength: {
            pattern: /^.{7,20}$/,
            message: '7-20 characters'
        },
        lowercaseLetter: {
            pattern: /^.*[a-z].*$/,
            message: '1 lowercase letter'
        },
        uppercaseLetter: {
            pattern: /^.*[A-Z].*$/,
            message: '1 uppercase letter'
        },
        numericValue: {
            pattern: /^.*[0-9].*$/,
            message: '1 numeric value'
        },
        specialCharacter: {
            pattern: /^.*[!@#$%^&*)(].*$/,
            message: '1 special character'
        }
    }

    return(
        <PasswordRequirements
            rules={validationRules}
            value={passwordState}
        />
    )
}

API Reference

rules

  rules={validationRules}

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | validationRules | object | Object containing password rules to be validated. |

value

  value={passwordValue}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | passwordValue | string | Current password value for rules to be validated against. |

Authors

• @technicaldebt