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