Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-password-strometer

Mindtraveller62ISC1.0.4TypeScript support: included

React password strength meter.

react, password-strength-meter, zxcvbn, web-worker

readme

react-password-strometer

npm build

npm bundle size npm bundle size npm peer dependency version npm dependency version

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.

`jsx harmony import Strometer from 'react-password-strometer';

const password = 'some password';

<Strometer password={password}> {({ passwordInfo }) => ( {passwordInfo && passwordInfo.score} )} </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.