Lightweight multiple selection dropdown component

May 07, 2020
Lightweight multiple selection dropdown component


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

View Demo View Github

✨ Features

  • ???? Lightweight (~4KB)
  • ???? 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" }, ]; 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

labelledByvalue for aria-labelledbystring
optionsoptions for dropdown[{label, value}]
valuepre-selected rows[{label, value}][]
focusSearchOnOpenfocus on search input when openingbooleantrue
hasSelectAlltoggle 'Select All' optionbooleantrue
isLoadingshow spinner on selectbooleanfalse
shouldToggleOnHovertoggle dropdown on hover optionbooleanfalse
overrideStringsOverride default strings for i18nobject
onChangeonChange callbackfunction
disableddisable dropdownbooleanfalse
selectAllLabelselect all labelstring
disableSearchhide search textboxbooleanfalse
filterOptionscustom filter optionsfunctionFuzzy Search
classNameclass name for parent componentstringmulti-select

???? Custom filter logic

By default this component uses fuzzy search algorithm to filter options but also allows you to opt-out and use your own 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)); }


You can override the strings to be whatever you want, including translations for your languages.

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

???? Themeing

You can override css variables to customize appearance

.multi-select { --rmsc-primary: #4285f4; --rmsc-hover: #f1f3f5; --rmsc-selected: #e2e6ea; --rmsc-border: #ccc; --rmsc-gray: #aaa; --rmsc-background: #fff; --rmsc-spacing: 10px; --rmsc-border-radius: 4px; --rmsc-height: 38px; }