multicomplete

useMultiComplete

The react hook to create multi selection autocomplete components.

Website - Docs - Examples

pnpm add multicomplete

Features

• 📦 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

Usage

Import the hook and use it in your component.

import { useMultiComplete } from 'multicomplete'

const handlers = useMultiComplete({
  options,
  values,
  onChange,
  id,
  isOpen,
  onOpenChange,
})

Helpers

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