React Pass Strength
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} />
Development
Run locally
This project was bootstrapped with Create React App.
Simply run:
npm start
Contribute
For any type of contribution, please follow the instructions in CONTRIBUTION and read the Code of Conduct file too.