react-password-strometer

React password strength meter component

This library provides a React wrapper around zxcvbn. Password strength calculations are performed in separate Web Worker, since it may take relatively big time and block main thread.

Demo

Examples

Strometer

The component accepts a password and a render function, which you can use to render whatever password strength representation you want. The function will be given with a password information as an argument which includes all properties zxcvbn provides.

import Strometer from 'react-password-strometer';

const password = 'some password';

<Strometer password={password}>
  {({ passwordInfo }) => (
    <span>{passwordInfo && passwordInfo.score}</span>
  )}
</Strometer>

Prop Types

{
    password: string,
    children: ({ passwordInfo: object | null }) => ReactElement,
}

• password - the password to be processed.
• children - the function which accepts passwordInfo and renders content. passwordInfo has all properties which zxcvbn provides (e.g. score). Please note that passwordInfo is null if the password is an empty string, because usually empty password is considered invalid, whereas zxcvbn gives 0 score to it.