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

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

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

hc-oss / react-multi-select-component

readme