Getting Started

Installation

Inside your project directory, run the following command:

pnpm add multicomplete

Brief introduction

useMultiComplete is a react hook to create a multi-select autocomplete component.

To create your own component, it delivers properties for the 5 basic building blocks of a multi-select autocomplete component:

To get a basic setup, you feed the useMultiComplete hook with:

import { useMultiComplete } from 'multicomplete'
import { useMemo, useState } from 'react'
 
// component definition ...
 
const options = useMemo(() => ['Option 1', 'Option 2', 'Option 3'])
const [values, setValues] = useState([])
const [isOpen, setIsOpen] = useState(false)
 
const handlers = useMultiComplete({
  options,                    // 1
  values,                     // ┬─ 2
  onChange: setValues,        // ┘
  id: 'my-own-multicomplete', // 3
  isOpen,                     // ┬─ 4
  onOpenChange: setIsOpen,    // ┘
})
 
// rest of component ...

1. a list of options
2. a value array and a onChange function to update the value
3. a html id to compute all accessibility attributes
4. (optional) isOpen and onOpenChange to control the visibility of the dropdown