Skip to content

temmietope/react-passwords-checklist

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published