React-passwords-checklist NPM

react-passwords-checklist

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

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

styled-components

@infinitebrahmanuniverse/nolb-react-pa @everything-registry/sub-chunk-2602

1.0.0-1

5 years ago

1.0.0

5 years ago