Simple password strength meter for React Native.
PassMeter has 5 level of security. It’s checks the typed password string has any upper case, lower case, numbers and special characters. Password string can be at least 4 character.
Strength Level | Description | Example |
---|---|---|
0 | Length of the password is below then gived or default minLenght | “ac”, “A2b”, “1&”, … |
1 | Password has at least one upper case, lower case, numbers and special characters | “example”, “PASSWORD”, “%+%&/!”, … |
2 | Password contains only two condition of the required | “exAmpLe”, “pa22w0rd”, “PA$$W%RD!”, … |
3 | Password contains only three condition of the required | “3xAmpL3”, “^!22w0rd&6”, “pA$$W%RD!”, … |
4 | Password contains all of the required conditions | “eX@mpL3”, “^P@22w0rd”, “pA22$$W%R1D!”, … |
npm install react-native-passmeter
or
yarn add react-native-passmeter
import React, { useState } from "react";
import { SafeAreaView, TextInput } from "react-native";
import PassMeter from "react-native-passmeter";
const MAX_LEN = 15,
MIN_LEN = 6,
PASS_LABELS = ["Too Short", "Weak", "Normal", "Strong", "Secure"];
export default App = () => {
const [password, setPassword] = useState("");
return (
<SafeAreaView style={styles.container}>
<TextInput
style={styles.input}
maxLength={15}
secureTextEntry
onChangeText={password => setPassword(password)}
/>
<PassMeter
showLabels
password={password}
maxLength={MAX_LEN}
minLength={MIN_LEN}
labels={PASS_LABELS}
/>
</SafeAreaView>
);
};
const styles = {
container: { flex: 1, justifyContent: "center" },
input: {
margin: 5,
padding: 6,
borderRadius: 8,
marginBottom: 8,
paddingHorizontal: 10,
backgroundColor: "#eceff1"
}
};
Prop | Type | Description | isRequired | Default Value |
---|---|---|---|---|
password | String | Typed password | true | |
labels | Array | Strength levels of password | true | |
minLength | Number | Minimum length of password | false | 4 |
maxLength | Number | Maximum length of password | false | 15 |
showLabels | Boolean | Visibilty of strength labels | false | true |
Feel free to contribute, any PR will be welcomed!
Author: ezranbayantemur
GitHub: https://github.com/ezranbayantemur/react-native-passmeter
#react-native #programming #react