react-password-check

A simple password strength indicator component for react.

Installation

npm install react-password-check

Usage

import { useState } from "react";

import { images } from "./assets";
import PasswordCheck from "./components/PasswordCheck";

export default function App() {
  const [password, setPassword] = useState<string>("");

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          height: 40,
          width: 300,
          position: "relative",
        }}
      >
        <input
          style={{
            width: "100%",
            height: 40,
            boxSizing: "border-box",
          }}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <PasswordCheck
          value={password}
          name="password"
          position="top"
          images={{
            right: images.checkMark,
            wrong: images.close,
          }}
        />
      </div>
    </div>
  );
}

License

MIT