The react hook to create multi selection autocomplete components.
pnpm add multicomplete- 📦 Tiny - 1.5kb gzipped
- 🎨 Customizable - style it to your needs
- ♿ Accessible - fully wai-aria compliant
- 📖 Typescript - written in typescript
- 📱 Mobile - works on mobile devices
- 🌙 Themeable - use your own theme
- 📚 Examples - examples for different scenarios
Import the hook and use it in your component.
import { useMultiComplete } from 'multicomplete'
const handlers = useMultiComplete({
options,
values,
onChange,
id,
isOpen,
onOpenChange,
})There are helpers to make working with complex data values easier.
import {
createSubstringFilter,
createEqualityFunction
} from 'multicomplete'
type Item = {
id: string
name: string
}
const isEqual = createEqualityFunction<Item>(v => v.id)
// a.k.a. a.id === b.id
const filter = createSubstringFilter<Item>(v => v.name)
// a.k.a. value.name.toLowerCase().includes(query.toLowerCase())![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent