3.1.3 • Published 2 years ago

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

Weekly downloads
31
License
MIT
Repository
github
Last release
2 years ago

react-multi-select-component

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

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

PropDescriptionTypeDefault
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