@costilladante/password-validator
Version:
A customizable React password validator component with accessibility features
235 lines (180 loc) • 6.73 kB
Markdown
# React Password Validator
[](https://www.npmjs.com/package/@costilladante/password-validator)
[](https://bundlephobia.com/package/@costilladante/password-validator)
[](https://www.npmjs.com/package/@costilladante/password-validator)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
A customizable React password validator component with accessibility features.
## ✨ Features
- 🎯 **Flexible Rules**: Create your own password rules or use our pre-built ones
- ♿ **Accessibility First**: Works with screen readers and keyboard navigation
- 🎨 **Style It Your Way**: Customize the look and feel to match your app
- 📱 **Mobile Friendly**: Looks great on any device
- 🧪 **Well Tested**: We've got your back with comprehensive tests
### Tech Stack
- Build Tool: Vite
- Language: TypeScript
- UI Library: React
- Styling: Sass (SCSS), CSS Modules, CSS variables
- Testing: Vitest, React Testing Library
- Linting/Formatting: ESLint (Airbnb base, Prettier), Stylelint (SCSS)
- Git Hooks: Husky, lint-staged
- Commit Conventions: (Optional) Conventional Commits
### Accessibility
The component includes:
- Screen reader support with ARIA attributes
- Live updates for validation changes
- Full keyboard navigation
- Semantic HTML structure
## 🚀 Quick Start
First, install it:
```bash
npm install @costilladante/password-validator
# or
yarn add @costilladante/password-validator
# or
pnpm add @costilladante/password-validator
```
> ℹ You will need to import the styles in your main file (usually at the root of your project, like `main.tsx`).
```tsx
import { PasswordValidator, defaultRules, FunctionRule } from '@costilladante/password-validator'
import '@costilladante/password-validator/style.css'
const customRule = new FunctionRule(
'customRule', // name of your rule
'Password must be longer than 10 characters', // a message of the requirements
(password: string) => password.length > 10, // the validator function. Can also be a RegEx!
)
const customRuleSet: RuleSet = new RuleSet([...defaultRules.rules, customRule])
function App() {
return (
<PasswordValidator
ruleSet={customRuleSet}
// Optional props
indicators={{
valid: '✓',
invalid: '✗',
}}
className="custom-container"
inputClassName="custom-input"
indicatorClassName="custom-indicator"
/>
)
}
```
## 🎮 Examples
### Basic Usage
Use the pre-built rules by default.
```tsx
<PasswordValidator ruleSet={defaultRules} />
```
### Custom Rules
You can create rules that validate a function or RegEx and show a message.
```tsx
import { RuleSet } from '@costilladante/password-validator'
const myRules: RuleSet = {
rules: [
{
name: 'length',
message: 'At least 8 characters please!',
validate: (password) => (password.length >= 8 ? null : 'Too short!'),
},
{
name: 'uppercase',
message: 'Need at least one BIG letter',
validate: (password) => (/[A-Z]/.test(password) ? null : 'No uppercase found!'),
},
{
name: 'special',
message: 'Add a special character (!@#$%)',
validate: (password) => (/[!@#$%]/.test(password) ? null : 'Missing special character!'),
},
],
}
function App() {
return <PasswordValidator ruleSet={myRules} />
}
```
### Custom Styling
You can easily customize the component.
```tsx
<PasswordValidator
ruleSet={defaultRules}
className="my-container"
inputClassName="my-input"
indicatorsClassName="my-indicators"
indicatorItemClassName="my-indicator-item"
/>
```
## 🛠️ Props
| Prop | Type | Required | Default | Description |
| -------------------------- | ------------------------------------------------------ | -------- | ------------------------------ | --------------------- |
| **ruleSet** | RuleSet | Yes | - | Your password rules |
| **indicators** | { valid?: React.ReactNode, invalid?: React.ReactNode } | No | { valid: '✅', invalid: '❌' } | Custom checkmarks |
| **className** | string | No | - | Container class |
| **inputClassName** | string | No | - | Input field class |
| **indicatorsClassName** | string | No | - | Rules list class |
| **indicatorItemClassName** | string | No | - | Individual rule class |
## 🎨 Styling
The component uses CSS modules, so you can easily override the default styles.
```scss
.my-container {
max-width: 400px;
margin: 20px auto;
}
.my-input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
&:focus {
border-color: #007bff;
outline: none;
}
}
.my-indicators {
margin-top: 10px;
padding: 0;
list-style: none;
}
.my-indicator-item {
display: flex;
align-items: center;
gap: 8px;
margin: 5px 0;
color: #666;
&.valid {
color: #4e28a7;
}
&.invalid {
color: #c48322;
}
}
```
## 💻 Development
Want to play around with the code? Here's how to get started:
```bash
# Clone the repo
git clone https://github.com/yourusername/password-validator.git
cd password-validator
# Install dependencies
pnpm install
# Start the development server
pnpm dev
# Run tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Check test coverage
pnpm test:coverage
# Build the library
pnpm build
# Lint your code
pnpm lint
# Lint your styles
pnpm stylelint
# Format your code
pnpm format
```
## 📝 License
MIT - Feel free to use this in your projects!