/react-multi-select-component

Lightweight (~5KB gzipped) multiple selection dropdown component

Primary LanguageTypeScriptMIT LicenseMIT

react-multi-select-component

Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

Storybook GitHub Actions Status NPM gzip

✨ 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

📜 License

MIT © harshzalavadiya