# react-password-strength-variant-indicator

> Password strength check indicator for react

Latest version **1.1.0** (published 2020-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-password-strength-variant-indicator
pnpm add react-password-strength-variant-indicator
yarn add react-password-strength-variant-indicator
bun add react-password-strength-variant-indicator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-05-11 |
| First published | 2020-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 931.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | kesav |
| Maintainers | kesav_m |
| Keywords | react, password, variant, react-password, indicator |

## Links

- npm: https://www.npmjs.com/package/react-password-strength-variant-indicator
- Repository: https://github.com/kesav-m/react-password-strength-variant-indicator
- Homepage: https://github.com/kesav-m/react-password-strength-variant-indicator#readme
- Issues: https://github.com/kesav-m/react-password-strength-variant-indicator/issues
- npm.io page: https://npm.io/package/react-password-strength-variant-indicator

## Dependencies (4)

- [react](https://npm.io/package/react.md) 16.12.0
- [zxcvbn](https://npm.io/package/zxcvbn.md) 4.4.2
- [react-dom](https://npm.io/package/react-dom.md) 16.12.0
- [react-scripts](https://npm.io/package/react-scripts.md) ^3.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-05-11
- 1.0.9 — 2020-05-11
- 1.0.8 — 2020-05-07
- 1.0.7 — 2020-05-07
- 1.0.6 — 2020-05-05
- 1.0.5 — 2020-05-05
- 1.0.4 — 2020-05-03
- 1.0.3 — 2020-05-03
- 1.0.2 — 2020-05-03
- 1.0.1 — 2020-05-03
- 1.0.0 — 2020-05-03

## README

# React Password Strength Indicator

A password strength checker with various indicator options using [zxcvbn](https://www.npmjs.com/package/zxcvbn) library.

### Demo App

Try it [live](https://password-strength-demo.netlify.app/)

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development.

### Prerequisites

react/react-dom is a peer dependency. You should be using this in a React project.

### Installing

Add password strength indicator to your project by executing

```
npm install react-password-strength-variant-indicator
```
### Usage

Here's an example of basic usage:

```js
import React, { Component } from 'react';
import StrengthCheck from "react-password-strength-variant-indicator";

class MyApp extends Component {
  state = {
    inputprops: { inputclass: "form-control", autocomplete: "off", tabIndex: 0 },
    value: ''
  }

  changeCallBackHandler = value => {
   this.setState({ value: value })
  };
  
  render() {
    return (
      <div>
        <StrengthCheck
        changecallback={val => {
          changeCallBackHandler(val);
        }}
        validscore="1"
        inputprops={this.state.inputprops}
        variant="circle"
      />
      </div>
    );
  }
}
```
## User guide

#### Props

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|minLength|The minimum length of password to be typed.|5|`minLength=6`|
|validscore|The minimum valid score the password should have(The score value ranges from 0 to 4 depends on strength and complexity)|2|`validscore=3`|
|strength|The strength of the password based on the score | { 0: "Worst", 1: "Bad",2: "Weak",3: "Good",4: "Strong"}|`strength={0: "Weak",1: "Weak",2: "moderate",3: "Good",4: "Strong"}`|
|className|The className which get added to the component|No|`className=form`|
|inputprops|Object which accepts all the parameters that will be used in input tag|No|`inputprops={{inputclass: 'form-control-input',autocomplete: 'off'tabIndex=-1,}`|
|variant|This gives different types of variant options that can be choosed for strength display|linear-stripped|`variant=line`|
|changecallback|A callback function which gets triggered onChange which gives the input value in the format `{value: typedValue,isValid: boolean,score: score}`.isValid is a boolean which depends on the input length and score.score value ranges from 0 to 4 which depends on password strength and complexity.value gives the inputvalue in the field|No|`changecallback={val => {changeCallBackHandler(val);}}`|

#### variants

|variant name|Example|
|----|----|
|`variant=linear`|<img alt="linear" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/linear.png?raw=true">|
|`variant=linear-stripped`|<img alt="linear-stripped" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/linear-stripped.png?raw=true">|
|`variant=discontinuous`|<img alt="discontinuous" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/discontinuous.png?raw=true">|
|`variant=discontinuous-stripped`|<img alt="discontinuous-stripped" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/discontinuous-stripped.png?raw=true">|
|`variant=circle`|<img alt="circle" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/circle.png?raw=true">|
|`variant=line`|<img alt="line" src="https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/line.png?raw=true">|



## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/kesav-m/react-password-strength-variant-indicator/blob/master/LICENSE) file for details

---
_Source: https://npm.io/package/react-password-strength-variant-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._