react-native-password-validate-checklist
Version:
Customized password validating checklist
164 lines (128 loc) • 5.48 kB
Markdown
A customizable component that validates passwords based on specific rules and displays a checklist indicating the validation status.
- Using Yarn: `yarn add react-native-password-validate-checklist`
- Using npm: `npm install react-native-password-validate-checklist`
```jsx
import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
import PasswordValidate from "react-native-password-validate-checklist";
const PasswordCheckComponent = () => {
const [password1, setPassword1] = useState("");
const [password2, setPassword2] = useState("");
const [validated, setValidated] = useState(false);
return (
<View>
<TextInput
placeholder="Enter new password"
onChangeText={setPassword1}
/>
<TextInput
placeholder="Confirm new password"
onChangeText={setPassword2}
/>
<PasswordValidate
newPassword={password1}
confirmPassword={password2}
validationRules={[
{ key: "MIN_LENGTH", ruleValue: 9, label: "Minimum 9 characters" },
{ key: "MAX_LENGTH", ruleValue: 15, label: "Maximum 15 characters" },
{ key: "LOWERCASE_LETTER" },
{ key: "UPPERCASE_LETTER" },
{ key: "NUMERIC" },
{ key: "SPECIAL_CHARS" },
{ key: "PASSWORDS_MATCH" },
]}
onPasswordValidateChange={setValidated}
imageSource={{
success: require("./assets/success/success.png"),
error: require("./assets/error/error.png"),
}}
isImage={true}
iconComponent={{
success: <Text>✔</Text>,
error: <Text>✖</Text>,
}}
/>
<Text>{validated ? "Password is valid" : "Password is invalid"}</Text>
</View>
);
};
export default Test;
```
Below are the possible rules you can use to validate passwords:
Validates that the password has at least a specified number of characters.
```json
{
"key": "MIN_LENGTH",
"ruleValue": 10, // required
"label": "Minimum 10 characters"
}
```
Ensures the password does not exceed a specified number of characters.
```json
{
"key": "MAX_LENGTH",
"ruleValue": 15, // required
"label": "Maximum 15 characters"
}
```
Validates that the password contains at least one uppercase letter.
```json
{
"key": "UPPERCASE_LETTER",
"label": "Minimum 1 uppercase letter"
}
```
Ensures the password contains at least one lowercase letter.
```json
{
"key": "LOWERCASE_LETTER",
"label": "Minimum 1 lowercase letter"
}
```
Validates that the password contains at least one numeric digit.
```json
{
"key": "NUMERIC",
"label": "Requires at least one numeric digit"
}
```
Ensures the password contains at least one special character.
```json
{
"key": "SPECIAL_CHARS",
"label": "Minimum 1 special character"
}
```
Checks if the new password and the confirm password match.
```json
{
"key": "PASSWORDS_MATCH",
"label": "Passwords must match"
}
```
| Name | Type | isRequired | Default Value | Description |
|-------------------------|------------------------------------|------------|---------------|-----------------------------------------------------------------------------------|
| newPassword | string | Yes | - | The new password to validate. |
| confirmPassword | string | No | - | The confirm password to check if it matches the new password. |
| onPasswordValidateChange| Function | Yes | - | Callback function to execute when validation rules change. |
| validationRules | [{ key: string, label: string, ruleValue: number }] | Yes | - | A list of rules used to validate passwords. |
| containerStyle | ViewStyle | No | - | Custom styling for the container. |
| labelStyle | { success: TextStyle, error: TextStyle } | No | - | Custom styling for validation labels, distinguishing success and error states. |
| imageStyle | ImageStyle | No | - | Custom styling for success/error icons. |
| imageSource | { success: ImageURISource, error: ImageURISource } | No | - | Custom image sources for success and error icons. |
| isImage | boolean | No | true | Flag to indicate if validation icons should be images or custom components. |
| iconComponent | { success: React.ReactNode, error: React.ReactNode } | No | - | Custom components to use as success/error icons, when not using images. |