react-multi-select-component

Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

✨ Features

• 🍃 Lightweight (<5KB)
• 💅 Themeable
• ✌ Written w/ TypeScript

🔧 Installation

npm i react-multi-select-component    # npm
yarn add react-multi-select-component # yarn

📦 Example

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";

const Example: React.FC = () => {
  const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry", disabled: true },
    { label: "Watermelon 🍉", value: "watermelon" },
    { label: "Pear 🍐", value: "pear" },
    { label: "Apple 🍎", value: "apple" },
    { label: "Tangerine 🍊", value: "tangerine" },
    { label: "Pineapple 🍍", value: "pineapple" },
    { label: "Peach 🍑", value: "peach" },
  ];

  const [selected, setSelected] = useState([]);

  return (
    <div>
      <h1>Select Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy={"Select"}
      />
    </div>
  );
};

export default Example;

👀 Props

| Prop | Description | Type | Default | | --------------------- | ------------------------------------------------------ | ---------------------------- | -------------- | | labelledBy | value for aria-labelledby | string | | | options | options for dropdown | [{label, value, disabled}] | | | value | pre-selected rows | [{label, value}] | [] | | focusSearchOnOpen | focus on search input when opening | boolean | true | | hasSelectAll | toggle 'Select All' option | boolean | true | | isLoading | show spinner on select | boolean | false | | shouldToggleOnHover | toggle dropdown on hover option | boolean | false | | overrideStrings | i18n docs | object | | | onChange | onChange callback | function | | | disabled | disable dropdown | boolean | false | | selectAllLabel | select all label | string | | | disableSearch | hide search textbox | boolean | false | | filterOptions | custom filter options | function | Fuzzy Search | | className | class name for parent component | string | multi-select | | valueRenderer | custom dropdown header docs | function | | | ItemRenderer | custom dropdown option docs | function | | | ClearIcon | Custom Clear Icon for Search | JSX.element | | | ArrowRenderer | Custom Arrow Icon for Dropdown | JSX.element | | | debounceDuration | debounce duraion for Search | number | 300 | | ClearSelectedIcon | Custom Clear Icon for Selected Items | JSX.element | function |

🔍 Custom filter logic

By default this component uses a fuzzy search algorithm to filter options but also allows you to opt-out and use your custom logic if you want to below is the example doing just case insensitive search

export function filterOptions(options, filter) {
  if (!filter) {
    return options;
  }
  const re = new RegExp(filter, "i");
  return options.filter(({ value }) => value && value.match(re));
}

🌐 Internationalization

You can easily Internationalize this component by passing prop overrideStrings so that UI strings can be presented in a different language

default values for overrideStrings are as below

{
  "selectSomeItems": "Select...",
  "allItemsAreSelected": "All items are selected.",
  "selectAll": "Select All",
  "search": "Search",
  "clearSearch": "Clear Search"
}

🎛 Custom Value Renderer

Optionally customise value renderer view by passing valueRenderer prop

const customValueRenderer = (selected, _options) => {
  return selected.length
    ? selected.map(({ label }) => "✔️ " + label)
    : "😶 No Items Selected";
};

🎛 Custom Item Renderer

Optionally customise dropdown item by passing ItemRenderer prop

Default Item Renderer

💅 Themeing

You can override CSS variables to customize the appearance

.multi-select {
  --rmsc-main: #4285f4;
  --rmsc-hover: #f1f3f5;
  --rmsc-selected: #e2e6ea;
  --rmsc-border: #ccc;
  --rmsc-gray: #aaa;
  --rmsc-bg: #fff;
  --rmsc-p: 10px; /* Spacing */
  --rmsc-radius: 4px; /* Radius */
  --rmsc-h: 38px; /* Height */
}

use !important if CSS variables are not getting applied

🤠 Credits

• This project gets inspiration and several pieces of logical code from react-multiple-select
• TypeScript
• TSDX
• Goober

📜 License

MIT © harshzalavadiya