React Autocomplete-Multiselect

This project was made because after I've found out that the (still awesome) react-select library wasn't suiting my usecase, I had to create a library on my own, also for testing React npm published components. This library was made using React without CRA, use-debounce, styled-components, webpack and of course TypeScript.

Install

Just run yarn add react-autocomplete-multiselect or npm i react-autocomplete-multiselect

Usage

This library introduces a simple React component, which is and following here are all the available properties and events to customize it

$3

##### searchFunction: (query: string) => Promise;

Mandatory, it's a function which accept a query parameter and use it to return a Promise with a list of items as result. This will be debounced using debounceTime and triggered after input

##### customInput?: ({clearSelection: () => void, onChange: (newValue: string) => void}) => JSX.Element;

Optional, if provided can be used to pass a custom JSX.Element which requires an onChange handler fired by the input (must have an tag). Also, provides clearSelection callback which clears all selected items

##### customCounter?: ({selectedItems: any[], onItemClick: (item: any) => void}) => JSX.Element;

Optional, if provided accepts a function by passing the list of selectedItems and returns a JSX Element which will be displayed before the list of items. Also, it can handle deselection directly from the JSX.Element by integrating the provided onItemClick callback

##### onSelectionChange?: ({selectedItems: any[], valid: boolean}) => void;

Optional, callback which gets fired when the selection changes, with a boolean indicating wherever the selection matches the min/max boundaries or not. Provides the selectedItems as argument

##### onItemSelected?: (selectedItem: any) => void;

Optional, fires a callback when an item is selected by providing the selected item as argument

##### itemKeyFunction?: (item: any) => string;

Optional (recommended), is a function which get used to create list keys to render list items. It takes the input item as argument and can return a string with whatever you want. Selected items will be compared using the value returned by this function, and defaults to a (ugly) JSON.stringify(item)

##### customClearButton?: ({onClick: (e: React.MouseEvent) => void, value: string}) => JSX.Element;

Optional, will be fired when some text is getting written. Requires an onClick event handler which can be used to clear the input, and provides the searchValue as parameter, if needed

##### renderItem?: ({item: any, selected: boolean, disabled: boolean, query: string}) => JSX.Element;

Optional, a custom renderer for the list item. _Will be rendered inside a