A composable and flexible multi-entry input component for React
npm install @micoblanc/chipsterChipster is a composable and flexible multi-entry input component for React. Perfect for managing tags, email addresses, or any list-based input scenario with built-in validation and suggestions support.
``bash`
npm install @micoblanc/chipster
`tsx
import { Chipster } from '@micoblanc/chipster'
export default function BasicExample() {
return (
{ test: (v) => v.length >= 2, message: 'Min 2 characters' },
{ test: (v) => v.length <= 20, message: 'Max 20 characters' }
]}
maxItems={10}
allowDuplicates={false}
/>
)
}
`
- 🎨 Highly Customizable: Style with Tailwind classes and theme support
- 🔍 Smart Suggestions: Built-in autocomplete with custom suggestions
- ✅ Validation: Flexible validation rules and constraints
- ⌨️ Keyboard Navigation: Full keyboard support for better accessibility
- 🌓 Theme Support: Built-in light and dark themes
- 🎯 Composable: Mix and match components as needed
`tsx
const suggestions = [
{ label: 'JavaScript', icon: '🟨' },
{ label: 'TypeScript', icon: '🔷' },
{ label: 'React', icon: '⚛️' }
]
export default function AdvancedExample() {
const getSuggestions = useCallback((input: string) => {
return suggestions
.filter(item =>
item.label.toLowerCase().includes(input.toLowerCase())
)
.map(item => ({
label: item.label,
icon: item.icon,
data: item
}))
}, [])
return (
)
}
`
Chipster supports custom styling through className props and theme variants:
`tsx
// Basic styling with overrides
itemClassName="!bg-blue-100 !px-3 !py-1" // Use ! to override defaults
removeButtonClassName="!text-red-500"
/>
// Dark theme with custom styles
removeButtonClassName="!text-gray-400"
/>
`
- ArrowLeft/Right: Navigate between chips when input is emptyBackspace
- : Remove highlighted chip or last chip when input is emptyArrowUp/Down
- : Navigate through suggestionsEnter
- : Select highlighted suggestionEscape`: Clear suggestions and chip highlight
-
For complete documentation and examples, visit chipster.micoblanc.me/start
MIT © [Alvaro Gallego De Paz]