FidelisClayton / react-multi-select-component

Simple multiple selection dropdown component with `checkboxes`, `search` and `select-all`

react-multi-select-component

Simple multiple selection dropdown component with checkboxes, search and select-all

✨ Features

• 🍃 Lightweight (~14KB)
• 💅 Themeable
• ✌ Written w/ TypeScript

🔧 Installation

npm i react-multi-select-component    # npm
yarn add react-multi-select-component # yarn

📦 Example

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";

const Example: React.FC = () => {
  const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" }
  ];

  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 App;

👀 Props

Prop	Description	Type	Default
labelledBy	value for aria-labelledby	string
options	options for dropdown	[{label, value}]
value	pre-selected rows	[{label, value}]	[]
focusSearchOnOpen	focus on search input when opening	boolean	true
hasSelectAll	toggle 'Select All' option	boolean	true
isLoading	show spinner on select	boolean	false
shouldToggleOnHover	toggle dropdown on hover option	boolean	false
overrideStrings	Override default strings for i18n	object
onChange	onChhange callback	function
disabled	disable dropdown	boolean	false
selectAllLabel	select all label	string
disableSearch	hide search textbox	boolean	false
filterOptions	custom filter options	function
theme	theme variables	object

🌐 Internationalization

You can override the strings to be whatever you want, including translations for your languages.

{
  "selectSomeItems": "Select...",
  "allItemsAreSelected": "All items are selected.",
  "selectAll": "Select All",
  "search": "Search"
}

💅 Themeing

You can override theme variables to change colors

{
  "primary": "#4285F4",
  "hover": "#f1f3f5",
  "border": "#ccc",
  "gray": "#aaa",
  "background": "#fff",
  "borderRadius": "4px",
  "height": "38px"
}

🤠 Credits

• This project gets inspiration and several pieces of logical code from react-multiple-select
• TypeScript
• Rollup
• Emotion

📜 License

MIT © harshzalavadiya