react-easy-password-validation
v1.1.2
Published
React component for validation input password via specified rules set
Downloads
28
Maintainers
Readme
react-easy-password-validation
Installation
npm install react-easy-password-validation
or
yarn add react-easy-password-validation
Demo
Usage/Examples
import { PasswordValidator } from 'react-easy-password-validation'
function App() {
const [password, setPassword] = useState < string > ''
// Try fetching rules from api or json or a const variable
const rules = [
{ regex: '^.{8,32}$', message: 'Must be 8 to 32 character' },
{ regex: '(?=.*[a-z])', message: 'At least one lower case letter exists' },
{ regex: '(?=.*[A-Z])', message: 'At least one upper case letter exists' },
{ regex: '(?=.*d)', message: 'At least one digit exists' },
]
return (
<div>
<div className='form-group'>
<label htmlFor='input-password'>Password: </label>
<input type='password' id='input-password' value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
<PasswordValidator
className='react-easy-password-validator'
ruleSet={rules}
passedRuleClassName='passed'
failedRuleClassName='failed'
passwordValue={password}
passIcon={
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>
<path d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z' />
</svg>
}
failIcon={
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>
<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z' />
</svg>
}
/>
</div>
)
}
Features
- easy to use
- easy to customize
- custom hook (coming soon)
API Reference
| Props | Type | Description |
| :-------------------- | :----------------------------------------------------------------------- | :----------- |
| ruleSet
| Array<{regex: String \| RegExp, message: String}>
| Required |
| passwordValue
| String
| Required |
| passedRuleClassName
| String
representing passed rule class name (default is text-success
) | Optional |
| failedRuleClassName
| String
representing failed rule class name (default is text-danger
) | Optional |
| passIcon
| React.ReactNode
| Optional |
| failIcon
| React.ReactNode
| Optional |
Related
We are Pinkswan team developing all kinds on software projects
🚀 About Me
I'm MohammadReza ESKANDARI full stack developer at Pinkswan. You can contact me via ([email protected])