Nine Pedestrians Mesmerized
    Have ideas to improve npm?Join in the discussion! »

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

    4.0.1 • 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 Example = () => {
      const options = [
        { label: "Grapes 🍇", value: "grapes" },
        { label: "Mango 🥭", value: "mango" },
        { label: "Strawberry 🍓", value: "strawberry", disabled: true },
        { label: "Watermelon 🍉", value: "watermelon" },
        { label: "Pear 🍐", value: "pear" },
        { label: "Apple 🍎", value: "apple" },
        { label: "Tangerine 🍊", value: "tangerine" },
        { label: "Pineapple 🍍", value: "pineapple" },
        { label: "Peach 🍑", value: "peach" },
      ];
    
      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;

    👀 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 i18n docs object
    onChange onChange callback function
    disabled disable dropdown boolean false
    selectAllLabel select all label string
    disableSearch hide search textbox boolean false
    filterOptions custom filter options (async supported) docs function Fuzzy Search
    className class name for parent component string multi-select
    valueRenderer custom dropdown header docs function
    ItemRenderer custom dropdown option docs 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

    🔍 Custom filter logic

    By default this component uses a fuzzy search algorithm to filter options but also allows you to opt-out and use your custom logic if you want to below is the example doing just case insensitive search

    export function filterOptions(options, filter) {
      if (!filter) {
        return options;
      }
      const re = new RegExp(filter, "i");
      return options.filter(({ value }) => value && value.match(re));
    }

    🌐 Internationalization

    You can easily Internationalize this component by passing prop overrideStrings so that UI strings can be presented in a different language

    default values for overrideStrings are as below

    {
      "allItemsAreSelected": "All items are selected.",
      "clearSearch": "Clear Search",
      "noOptions": "No options",
      "search": "Search",
      "selectAll": "Select All",
      "selectSomeItems": "Select..."
    }

    🎛 Custom Value Renderer

    Optionally customise value renderer view by passing valueRenderer prop

    const customValueRenderer = (selected, _options) => {
      return selected.length
        ? selected.map(({ label }) => "✔️ " + label)
        : "😶 No Items Selected";
    };

    🎛 Custom Item Renderer

    Optionally customise dropdown item by passing ItemRenderer prop

    Default Item Renderer

    💅 Themeing

    You can override CSS variables to customize the appearance

    .rmsc {
      --rmsc-main: #4285f4;
      --rmsc-hover: #f1f3f5;
      --rmsc-selected: #e2e6ea;
      --rmsc-border: #ccc;
      --rmsc-gray: #aaa;
      --rmsc-bg: #fff;
      --rmsc-p: 10px; /* Spacing */
      --rmsc-radius: 4px; /* Radius */
      --rmsc-h: 38px; /* Height */
    }

    use !important if CSS variables are not getting applied

    📝 Changelog

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

    🤠 Credits

    📜 License

    MIT © harshzalavadiya

    Install

    npm i react-multi-select-component

    DownloadsWeekly Downloads

    17,167

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    241 kB

    Total Files

    53

    Last publish

    Collaborators

    • avatar