react-passwords-checklist

A React package that shows a checklist of rules a user's password should fulfil. Very customizable!

Example

Install

npm install --save react-passwords-checklist

Usage

import React, { Component } from 'react'

import PasswordChecklist from 'react-passwords-checklist'

const App = () => {
  return <PasswordChecklist password={password} />
}

Props

| Props | Description | Type | Default value | options | | ------------------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | password | Password for testing | String | - | - | | minLength | Minimum password length | Number | 8 | - | | conditions | Array of custom conditions you want to check for on password | Array | ['length', 'number','specialChar', 'uppercase', 'lowercase'] | ['length', 'number','specialChar', 'uppercase', 'lowercase'] | | checkIcon | Icon to indicate that the test passed | String | '✓' | Desired icon | | failIcon | Icon to indicate that the test failed | String | '✕' | Desired icon | | checkIconColor | Color of checkIcon | String | 'green' | Desired color in rgba, hex, etc. | | failIcon | Color of failIcon | String | 'red' | Desired color in rgba, hex, etc. | | fontSize | Font size of checklist | String | '1rem' | Desired font-size in px, rem, etc | | className | className for component | String | - | Desired className |

Example Usage with various props

import React from 'react'
import PasswordChecklist from 'react-passwords-checklist'

const App = () => {
  const password = '123abcABc@'
  return (
    <PasswordChecklist
      password={password}
      minLength={3}
      conditions={['length', 'number', 'specialChar', 'uppercase', 'lowercase']}
      checkIconColor={'green'}
      failIconColor={'red'}
      fontSize='1rem'
    />
  )
}

License

MIT © temmietope