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

1npm i react-multi-select-component    # npm
2yarn add react-multi-select-component # yarn

📦 Example

1import React, { useState } from "react";
2import { MultiSelect } from "react-multi-select-component";
3
4const options = [
5  { label: "Grapes 🍇", value: "grapes" },
6  { label: "Mango 🥭", value: "mango" },
7  { label: "Strawberry 🍓", value: "strawberry", disabled: true },
8];
9
10const Example = () => {
11  const [selected, setSelected] = useState([]);
12
13  return (
14    <div>
15      <h1>Select Fruits</h1>
16      <pre>{JSON.stringify(selected)}</pre>
17      <MultiSelect
18        options={options}
19        value={selected}
20        onChange={setSelected}
21        labelledBy="Select"
22      />
23    </div>
24  );
25};
26
27export 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

• This project gets inspiration and several pieces of logical code from react-multiple-select
• TypeScript

📜 License

MIT © harshzalavadiya