Skip to content

Roeefl/react-multi-select-component

 
 

Repository files navigation

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
defaultIsOpen is dropdown open by default boolean undefined
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

About

Lightweight (~5KB gzipped) multiple selection dropdown component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 86.1%
  • CSS 8.7%
  • JavaScript 4.8%
  • HTML 0.4%