React-pass-strength NPM

React Pass Strength

Build Status

This is a small library I created which lets you measure password strength and also checks it against Have I Been Pwned APIs created by Troy Hunt to see if is found in a breach before or not.

Demo

Try out the demo on Stackblitz!

Install

npm i react-pass-strength --save

Since npm doesn't install the peer dependencies automatically, you will need to install sha1 npm package which is needed to calculate the password hash:

npm i sha1 rxjs --save

For a full dependency list refer to package.json file.

Setup

Import the component into your component where you want to use it. Then use <ReactPassStrength /> and pass the password and a callback at least.

import React, { Component } from "react";
import ReactPassStrength from "./PasswordStrength";

interface AppProps {

}

interface AppState {
  password: string;
}

export default class App extends Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props);
    this.state = {
      password: ""
    };

    this.handlePassStrengthChange = this.handlePassStrengthChange.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  render() {
    return (
      <div className="container">
        <form>
            <div className="form-group">
                <label>Password</label>
                <input type="password" 
                    className="form-control" id="exampleInputPassword1" 
                    value={this.state.password}
                    onChange={this.handleChange}
                    placeholder="Password"/>
            </div>

          <ReactPassStrength passwordToCheck={this.state.password} 
            onStrengthChanged={this.handlePassStrengthChange} />
        </form>
      </div>
    );
  }

  handleChange(event: React.FormEvent<HTMLInputElement>) {
    this.setState({
      password: event.currentTarget.value
    });
  }

  handlePassStrengthChange(strength: number | null) {
      console.log(strength);
  }
}

Customisation

You can customise the font family and label if you would like to. Simply pass them as inputs.

<ReactPassStrength passwordToCheck={this.state.password} 
    fontFamily="'Open Sans'"
    onStrengthChanged={this.handlePassStrengthChange} />

And you can change the label too.

<ReactPassStrength passwordToCheck={this.state.password} 
    fontFamily="'Open Sans'"
    barLabel="'Strength'"
    onStrengthChanged={this.handlePassStrengthChange} />