0.0.5 • Published 4 years ago

react-native-passmeter v0.0.5

Weekly downloads
67
License
MIT
Repository
-
Last release
4 years ago

React Native Simple Passmeter

Simple password strength meter for React Native.

GitHub license PRs Welcome

Pass GIF

Description

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 LevelDescriptionExample
0Length of the password is below then gived or default minLenght"ac", "A2b", "1&", ...
1Password has at least one upper case, lower case, numbers and special characters"example", "PASSWORD", "%+%&/!", ...
2Password contains only two condition of the required"exAmpLe", "pa22w0rd", "PA\$\$W%RD!", ...
3Password contains only three condition of the required"3xAmpL3", "^!22w0rd&6", "pA\$\$W%RD!", ...
4Password contains all of the required conditions"eX@mpL3", "^P@22w0rd", "pA22\$\$W%R1D!", ...

Installation

npm install react-native-passmeter

or

yarn add react-native-passmeter

Usage

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"
  }
};

Properties

PropTypeDescriptionisRequiredDefault Value
passwordStringTyped passwordtrue
labelsArrayStrength levels of passwordtrue
minLengthNumberMinimum length of passwordfalse4
maxLengthNumberMaximum length of passwordfalse15
showLabelsBooleanVisibilty of strength labelsfalsetrue

@0.0.5

Contribute

Feel free to contribute, any PR will be welcomed!

LICENSE

MIT