react-multi-select-component
Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all
✨ Features
- 🕶 Zero Dependency
- 🍃 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 options = [
{ label: "Grapes 🍇", value: "grapes" },
{ label: "Mango 🥭", value: "mango" },
{ label: "Strawberry 🍓", value: "strawberry", disabled: true },
];
const Example = () => {
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;
More examples can be found here ↗
👀 Props
| Prop | Description | Type | Default |
|---|
labelledBy | value for aria-labelledby | string | |
options | options for dropdown | [{label, value, disabled}] | |
value | pre-selected rows | [{label, value}] | [] |
hasSelectAll | toggle 'Select All' option | boolean | true |
isLoading | show spinner on select | boolean | false |
shouldToggleOnHover | toggle dropdown on hover option | boolean | false |
overrideStrings | localization ↗ | object | |
onChange | onChange callback | function | |
disabled | disable dropdown | boolean | false |
disableSearch | hide search textbox | boolean | false |
filterOptions | custom filter options (async supported) ↗ | function | Fuzzy Search |
className | class name for parent component | string | multi-select |
valueRenderer | custom dropdown header ↗ | function | |
ItemRenderer | custom dropdown option ↗ | function | |
ClearIcon | Custom Clear Icon for Search | ReactNode | |
ArrowRenderer | Custom Arrow Icon for Dropdown | ReactNode | |
debounceDuration | debounce duration for Search | number | 300 |
ClearSelectedIcon | Custom Clear Icon for Selected Items (Hint: Pass null to prevent it from rendering completely) | ReactNode | |
isCreatable | Allows user to create unavailable option(s) example ↗ | boolean | false |
onCreateOption | allows to override newly created option example ↗ | function | |
closeOnChangedValue | automatically closes dropdown when its value is changed | boolean | false |
📝 Changelog
For every release changelog/migration-guide will be available in releases
🤠 Credits
📜 License
MIT © harshzalavadiya
