@zilahir/react-multi-select-component

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	`string	function`
debounceDuration	debounce duraion for Search	number	300
ClearSelectedIcon	Custom Clear Icon for Selected Items	`string	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