react-native-password-validate-checklist v0.1.0

react-native-password-validate-checklist

A customizable component which can add rules to a password and show the status of each validation.

Example

Installation

yarn add react-native-password-validate-checklist npm install react-native-password-validate-checklist

Usage

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
import PasswordValidate from 'react-native-password-validation-checklist';

const Test: React.FC = () => {
  const [password1, setPassword1] = useState('');
  const [password2, setPassword2] = useState('');
  const [validated, setValidated] = useState(false);

  return (
    <View>
      <TextInput
        onChangeText={text => setPassword1(text)}
      />
      <TextInput
        onChangeText={text => setPassword2(text)}
      />

      <PasswordValidate
        newPassword={password1}
        confirmPassword={password2}
        validationRules={[
          {
            key: 'MIN_LENGTH',
            ruleValue: 9,
            label: 'Should contain more than 9 characters',
          },
          {
            key: 'MAX_LENGTH',
            ruleValue: 15,
            label: 'අක්ෂර 15 කට වඩා තිබිය නොහැක',
          },
          {key: 'LOWERCASE_LETTER'},
          {key: 'UPPERCASE_LETTER'},
          {key: 'NUMERIC'},
          {key: 'PASSWORDS_MATCH'},
          {key: 'SPECIAL_CHARS'},
        ]}
        onPasswordValidateChange={validatedBoolean =>
          setValidated(validatedBoolean)
        }
      />

      <Text>
        {validated ? 'PASSWORD VALIDATED' : 'NOT VALID PASSWORD'}
      </Text>
    </View>
  );
};

export default Test;

This library is capable of customizing validation labels as well. This is helpful for multiple languages supported applications

Possible validation rules

MIN_LENGTH

Set a minimum characters validation check

{
  key: "MIN_LENGTH",
  ruleValue: 10,  //  required
  label: "Minimum characters count is 10"
}

MAX_LENGTH

Set a maximum characters validation check

{
  key: "MAX_LENGTH",
  ruleValue: 15,  //  required
  label: "Maximum characters count is 15"
}

UPPERCASE_LETTER

Set an uppercase letter availability check

{
  key: "UPPERCASE_LETTER",
  label: "Password contains at least one uppercase letter"
}

LOWERCASE_LETTER

Set a lowercase letter availability check

{
  key: "LOWERCASE_LETTER",
  label: "Password contains at least one lowercase letter"
}

NUMERIC

Set a numeric character availability check

{
  key: "NUMERIC",
  label: "Password contains at least one numeric"
}

SPECIAL_CHARS

Set a numeric character availability check

{
  key: "SPECIAL_CHARS",
  label: "Password contains at least one special character"
}

PASSWORDS_MATCH

Set entered passwords matching validation check

{
  key: "PASSWORDS_MATCH",
  label: "Entered passwords are matching"
}

Props