Passmeter: Password Strength Meter For React Native


Category: React React Form | June 26, 2021
Author:ezranbayantemur
Official Page:Go to website
Last Update:June 26, 2021
License:MIT

Description:

A simple and effective password strength meter for React Native, that will tell the user the strength of his/her password.

How can I use it?

First, install the password strength meter using NPM.

npm install react-native-passmeter

Or, you may install it with Yarn.

yarn add react-native-passmeter

Then, import .

import React, { useState } from "react";
import { SafeAreaView, TextInput } from "react-native";
import PassMeter from "react-native-passmeter";

Usage:

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