React Multi Search Select

A fully tested Typescript React component that shows a multi select searchable dropdown.

Installation

yarn add react-multi-search-select

npm install react-multi-search-select

Usage

import React, { FC, ReactElement } from 'react';
import { ReactMultiSearchSelect } from 'react-multi-search-select';
import "~react-multi-search-select/dist/index.css";

export const Component: FC = (): ReactElement => {
  const onChange = (selectedOptions: SelectedOption[]): void => {
    console.log(selectedOptions);
  };
  
  return (
    <>
      <ReactMultiSearchSelect options={["test", "test2", "test3"]} onChange={onChange} />

      <ReactMultiSearchSelect
        options={[{id: 1, name: "test"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]}
        optionsObject={{key: "id", value: "name"}}
        onChange={onChange}
      />
    </>
  );
}

Ref

React Multi Search Select has its own internal state. If you wish to update this internal state to match your own state, you can pass through a ref and call the setOptions() function.

import React, { FC, ReactElement } from 'react';
import { ReactMultiSearchSelect } from 'react-multi-search-select';
import "~react-multi-search-select/dist/index.css";

export const Component: FC = (): ReactElement => {
  const ref = useRef<ReactMultiSearchSelectRef>();

  const clear = (): void => ref.current.setOptions([]);

  return (
    <>
      <button onClick={clear}>Clear All Options</button>
      <ReactMultiSearchSelect
        options={["test", "test2", "test3"]}
        defaultValues={["test", "test2", "test3"]}
        ref={ref}
      />
    </>
  );
}

Props

| Prop | Type | Default | Description | |:--------- | :---- | :---- |:---- | | options | array (string or key value pair) | Required | Can either be an array of strings: ["test", "test2"] or an array of objects: [{ id: 1, name: "test}, { id: 2, name: "test2}]| | defaultValues | number[] or string[] | null | Default options when first loaded. This is either an array of strings or numbers that matches the key if using optionsObject| | optionsObject | object | null | The key and value to show when using an array of objects for options. For example: {key: "id", value: "name"}| | onChange | function | null | Function to call when the selected options are changed. Returns an array of either string or number defined by key if using optionsObject| | disabled | boolean | false | Disables search input| | loading | boolean | false | Disables search input and shows loading spinner| | selectionLimit | number | null | The amount of selected options before the search input is disabled and no more can be selected| | placeholderText | string | Select | Place holder text| | noOptionsText | string | There are no options | No options text| | caseSensitiveSearch | boolean | false | Sets if search is case sensitive| | ref | ReactMultiSearchSelectRef | null | Allows calling some functions to update the internal state|

Styling

You can override each class as needed. The names are "name spaced" so that they do not affect any of your styling. These are all the classes and what they do:

| Class | Description| |:--------- | :----| | react-multi-search-select-container | Container for the whole component| | react-multi-search-select-search-wrapper | Wrapper for the search input| | react-multi-search-select-loading | Container for loading elements| | react-multi-search-select-loading > span | Loading text| | react-multi-search-select-container input | Search input| | react-multi-search-select-container input:focus | Search input focus| | react-multi-search-select-selected-option | Selected options next to the search input| | react-multi-search-select-selected-option:hover | Selected options hover| | react-multi-search-select-options-container | List for options to select| | react-multi-search-select-options-container.hide | List when its inactive| | react-multi-search-select-options-container li | Option to select| | react-multi-search-select-options-container li:not(.no-hover):hover | No options text (for no hover effect)|

Licence

MIT