react-password-strength-bar-indicator

Overview

A simple npm package to implement password input with strength bar indicator to know the password strength.

Installation

Npm users

$ npm install --save react-password-strength-bar-indicator

Yarn users

$ yarn add react-password-strength-bar-indicator

Usage

For Stateful components.

import  PasswordInput  from  'react-password-strength-bar-indicator';
import  "react-password-strength-bar-indicator/lib/main.css"

class App extends React.Component {
...
    this.state = {
	    password: '',
	    passwordStrength: '', // To get the values of strenght
	}
	render(){
		return(
			<PasswordInput
				value={this.state.password}
				onChange={e => this.setState({password: e.target.value})
				passwordStrength={value => this.setState({passwordStrength: value})
				placeholder="Password"
				type="password"
			/>
		)
	}
}

For Stateless component.

import  PasswordInput  from  'react-password-strength-bar-indicator';
import  "react-password-strength-bar-indicator/lib/main.css"

const App = () => {
    const [password, setPassword] = useState("");
    const [passwordStrength, setPasswordStrength] = useState("");
	
	return(
		<PasswordInput
			value={password}
			onChange={e => setPassword(e.target.value)
			passwordStrength={value => setPasswordStrength(value)
			placeholder="Password"
			type="password"
		/>
	)
}

Props

| Props |Value |Description | |----------------|-------------------------------|-----------------------------| |value|input value |Input value | |onChange |onChange={e => func(e)} |to handle onchange password input | |inputClassName |inputClasName| To change the style for password input which takes className as a value| |placeholder | placeholder | For password input placeholder |disabled | disabled={false} | To disable the password input either true or false |statusClassName | statusClassName | To change the style for status which is weak , fair and strong which takes className as a value |passwordStrength | passwordStrength={value => func(value)} | PasswordStrength function which will return the current strength of password |strengthStyle | strengthStyle={{style}} | StrengthStyle takes React style object to style the bar indicator. |type | type | Type which can be either password or text field.

License

MIT