react-multi-select-module v1.0.2
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 | |
defaultIsOpen | to keep menu open/closed by default | boolean | false |
isOpen | controlled version of defaultIsOpen | boolean |
🔍 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
💅 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