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

    4.1.13 • 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

    Install

    npm i react-multi-select-component

    DownloadsWeekly Downloads

    28,171

    Version

    4.1.13

    License

    MIT

    Unpacked Size

    192 kB

    Total Files

    98

    Last publish

    Collaborators

    • harshzalavadiya