react-multi-select-component
TypeScript icon, indicating that this package has built-in type declarations

4.3.4 • Public • Published

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

Package Sidebar

Install

npm i react-multi-select-component

Weekly Downloads

52,131

Version

4.3.4

License

MIT

Unpacked Size

35.9 kB

Total Files

6

Last publish

Collaborators

  • harshzalavadiya