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())