React Password Strength Indicator

React component for check wheather the password is strong.

Install

$ npm install react-passcode-strength-bar

Run

$ npm install
$ npm test
$ npm start

$ npm start

Usage

import React from 'react';
import { PasswordIndicator } from "react-passcode-strength-bar";
import { useState } from "react";
import './App.css';

function App() {
   const [passcode, setPasscode] = useState("");
   const [email, setEmail] = useState("");
  return (
    <>
     <div className='container'>
     <div>
     <label htmlFor="email">Email</label>
      <input
        type="text"
        name="password"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
        }}
      />
     </div>
     <div>
     <label htmlFor="password">Password</label>
      <input
        type="text"
        name="test"
        value={passcode}
        onChange={(e) => {
          setPasscode(e.target.value);
        }}
      />
     </div>
     <div>
      <PasswordIndicator
        password={passcode}
        show={true}
        indicate={(value)=>console.log(value)}
        colorConfig={{ strong: "green", moderate: "black", weak: "yellow" }}
        containerStyle={{
        marginTop: '5px',
        borderRadius: '10px',
        border: '1px solid #ccc',
        padding: '3px',
        width: '300px',
        height: '10px',
      }}
      />
     </div>
     <button>Submit</button>
    </div>
    </>
  );
}

export default App;

Examples

Checkout examples

Live example

Codesandbox

Demo live vercel

Password patterns

strong password : Demo@123

moderate password: Demo123

weak password: demo

Props /Options

Prop Name	Default	Required	Usage
password	this prop need to be passed as string password	Yes	This string analyse the strength of the password
show	true	No (optional)	This prop is used to show and hide the password indicator component
width	230px	No (optional)	This prop is used to Modify the width of password indicator component
height	8px	No (optional)	This prop is used to Modify the height of password indicator component
colorConfig:{}	{ strong: 'green', moderate: '#fcc603', weak: 'red', }	No (optional)	This prop is used to indicate the colors of different stages of password
indicate:(fn)	No	No (optional)	It gives the callback and value true if the password is strong. (value)=>console.log(value)
containerStyle:{}	Css properties	No (optional)	It is used to modify the style of the password Indicator component Note: if you define this prop all default css properties will be over written { marginTop: '5px', borderRadius: '10px', border: '1px solid #ccc', padding: '3px', width: '300px', height: '10px', }