solarea-react-multi-select-component

4.3.15 • 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 duraion for Search number 300
ClearSelectedIcon Custom Clear Icon for Selected Items ReactNode
isCreatable Allows user to create unavailable option(s) example boolean false
onCreateOption allows to override newly created option example function

📝 Changelog

For every release changelog/migration-guide will be available in releases

🤠 Credits

📜 License

MIT © harshzalavadiya

Package Sidebar

Install

npm i solarea-react-multi-select-component

Weekly Downloads

1

Version

4.3.15

License

MIT

Unpacked Size

206 kB

Total Files

21

Last publish

Collaborators

  • feddot2517