react-passwords-checklist

1.0.0-1 • Public • Published

react-passwords-checklist

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

NPM JavaScript Style Guide

Example

Checklist Demo

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

Dependencies (1)

Dev Dependencies (19)

Package Sidebar

Install

npm i react-passwords-checklist

Weekly Downloads

0

Version

1.0.0-1

License

MIT

Unpacked Size

259 kB

Total Files

7

Last publish

Collaborators

  • temmietope