# react-password-strength-zaratan

> A password strength indicator field for use in React projects

Latest version **2.0.12** (published 2018-01-27) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2018-01-27 |
| First published | 2017-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 183 |
| Author | Mateusz Wijas |
| Maintainers | zaratan |
| Keywords | react |

## Links

- npm: https://www.npmjs.com/package/react-password-strength-zaratan
- Repository: https://github.com/mmw/react-password-strength
- Homepage: https://github.com/mmw/react-password-strength#readme
- Issues: https://github.com/mmw/react-password-strength/issues
- npm.io page: https://npm.io/package/react-password-strength-zaratan

## Dependencies (2)

- [zxcvbn](https://npm.io/package/zxcvbn.md) ^4.3.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## 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

- 2.0.12 (latest) — 2018-01-27
- 2.0.11 — 2017-11-22
- 2.0.10 — 2017-11-22
- 2.0.9 — 2017-11-22
- 2.0.8 — 2017-11-22
- 2.0.7 — 2017-11-22
- 2.0.6 — 2017-11-22
- 2.0.4 — 2017-08-06
- 2.0.3 — 2017-08-06
- 2.0.2 — 2017-08-06
- 2.0.1 — 2017-08-06
- 2.0.0 — 2017-08-06

## README

# React Password Strength ![build status](https://codeship.com/projects/0fd512b0-c9f6-0134-86e7-125925b29f4b/status?branch=master)

A password strength indicator field using [zxcvbn](https://github.com/dropbox/zxcvbn) to calculate a password strength score.

_NOTE: zxcvbn is a large library it's recommended you split the codebase to manage bundle size._

[Try it live!](https://mmw.github.io/react-password-strength/)

## Install in your project

`npm install --save react-password-strength`

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

## Run the example locally

- `npm install`
- `npm start`
- open [http://localhost:8080/](http://localhost:8080/)

## Using the tool

```
<ReactPasswordStrength
  className="customClass"
  style={{ display: 'none' }}
  minLength={5}
  minScore={2}
  as={input}
  scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
  changeCallback={foo}
  inputProps={{ name: "password_input", autoComplete: "off", className: "form-control" }}
/>
```

### Importing

If using ES6 imports:
`import ReactPasswordStrength from 'react-password-strength';`

Using CommonJS require:
`var ReactPasswordStrength = require('react-password-strength');`

Using in a Universal JS App (server-side rendering):
- `import ReactPasswordStrength from 'react-password-strength/dist/universal';`
- Include default styling from `react-password-strength/dist/style.css`.

### Props

#### ClassName

- ClassName to render with default container classes

#### Style

- Style object to customize container

#### minLength (Default: 5)

- Minimum password length acceptable for password to be considered valid

#### minScore (Default: 2)

- Minimum score acceptable for password to be considered valid
- Scale from 0 - 4 denoting too guessable to very unguessable
- See [zxcvbn](https://github.com/dropbox/zxcvbn) docs for more detail

#### scoreWords (Default: ['weak', 'weak', 'okay', 'good', 'strong'])

- An array denoting the words used to describe respective score values in the UI

#### tooShortWord (Default: 'too short')

- A string to describe when password is too short (based on minLength prop).

#### as (Default: input)

- The base element included inside the ReactPasswordStrengh container.

#### changeCallback

- Callback after input has changed (and score was recomputed)
- React Password Strength passes an object with the current app state (`score`, `password`, `isValid`) to the callback function

#### inputProps

- Props to pass down to the `input` element of the component. Things like `name`, `id`, etc
- Protected props: `className`, `onChange`, `ref`, `value`
  - Passing in `className` will amend to the existing classes
  - The remaining props will be ignored

### Classes

_All styling is applied with CSS classes to allow custom styling and overriding._
- `ReactPasswordStrength` - namespace class and component wrapper
- `is-strength-{0-4}` - modifier class indicating password strength
- `ReactPasswordStrength-input` - password input field
- `is-password-valid` - modifier class indicating valid password
- `is-password-invalid` - modifier class indicating invalid password (only applies if password length > 0)
- `ReactPasswordStrength-strength-bar` - color bar indicating password strength
- `ReactPasswordStrength-strength-desc` - text indicating password strength


### Functions

_Access through `ref` handle of ReactPasswordStrength._
- `clear` - reset password field to initial state

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