3.1.3 • Published 2 years ago

@ani411/react-multi-select-component v3.1.3

Weekly downloads
Last release
2 years ago


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

Storybook GitHub Actions Status NPM gzip

✨ 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 (
      <h1>Select Fruits</h1>

export default Example;

👀 Props

labelledByvalue for aria-labelledbystring
optionsoptions for dropdown[{label, value, disabled}]
valuepre-selected rows[{label, value}][]
focusSearchOnOpenfocus on search input when openingbooleantrue
hasSelectAlltoggle 'Select All' optionbooleantrue
isLoadingshow spinner on selectbooleanfalse
shouldToggleOnHovertoggle dropdown on hover optionbooleanfalse
overrideStringsi18n docsobject
onChangeonChange callbackfunction
disableddisable dropdownbooleanfalse
selectAllLabelselect all labelstring
disableSearchhide search textboxbooleanfalse
filterOptionscustom filter optionsfunctionFuzzy Search
classNameclass name for parent componentstringmulti-select
valueRenderercustom dropdown header docsfunction
ItemRenderercustom dropdown option docsfunction
ClearIconCustom Clear Icon for SearchJSX.element
ArrowRendererCustom Arrow Icon for DropdownJSX.element
debounceDurationdebounce duraion for Searchnumber300
ClearSelectedIconCustom Clear Icon for Selected ItemsJSX.elementfunction

🔍 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

📜 License

MIT © harshzalavadiya