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

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

📜 License

MIT © harshzalavadiya