@zilahir/react-multi-select-component
v3.0.5
Published
Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all
Downloads
4
Maintainers
Readme
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
💅 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