Awesome Open Source
Awesome Open Source

react-multi-select-component

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

Storybook GitHub Actions Status NPM gzip

✨ Features

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

🔧 Installation

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

📦 Example

Example

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

const Example = () => {
  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}] []
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 (async supported) docs 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 ReactNode
ArrowRenderer Custom Arrow Icon for Dropdown ReactNode
debounceDuration debounce duraion for Search number 300
ClearSelectedIcon Custom Clear Icon for Selected Items ReactNode

🔍 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

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

ğŸŽ› 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

.rmsc {
  --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

📝 Changelog

For every major or minor release changelog/migration-guide will be available in releases

🤠 Credits

📜 License

MIT © harshzalavadiya


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,274) 
react (5,386) 
hacktoberfest (4,240) 
dropdown (94) 
select (93) 
multiselect (21)