react-multi-select-component-19
Version:
Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all
99 lines (76 loc) • 7.59 kB
Markdown
# react-multi-select-component
UPGRADE TO REACT 19
Simple and lightweight multiple selection dropdown component with `checkboxes`, `search` and `select-all`
[](https://react-multi-select-component.pages.dev/)
[](https://github.com/hc-oss/react-multi-select-component/actions)
[](https://npm.im/react-multi-select-component)
[](https://bundlephobia.com/result?p=react-multi-select-component@latest)
## ✨ Features
- 🕶 Zero Dependency
- 🍃 Lightweight (<5KB)
- 💅 Themeable
- ✌ Written w/ TypeScript
## 🔧 Installation
```bash
npm i react-multi-select-component # npm
yarn add react-multi-select-component # yarn
```
## 📦 Example
```tsx
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 ↗](https://react-multi-select-component.pages.dev/)
## 👀 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 ↗](stories/recipes/localization.stories.mdx) | `object` | |
| `onChange` | onChange callback | `function` | |
| `disabled` | disable dropdown | `boolean` | `false` |
| `disableSearch` | hide search textbox | `boolean` | `false` |
| `filterOptions` | [custom filter options (async supported) ↗](stories/recipes/custom-filter.stories.mdx) | `function` | Fuzzy Search |
| `className` | class name for parent component | `string` | `multi-select` |
| `valueRenderer` | [custom dropdown header ↗](stories/recipes/custom-value.stories.mdx) | `function` | |
| `ItemRenderer` | [custom dropdown option ↗](stories/recipes/custom-item.stories.mdx) | `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 ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-default) | `boolean` | `false` |
| `onCreateOption` | allows to override newly created option [example ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-custom) | `function` | |
| `closeOnChangedValue` | automatically closes dropdown when its value is changed | `boolean` | `false` |
## 📝 Changelog
For every release changelog/migration-guide will be available in [releases](https://github.com/hc-oss/react-multi-select-component/releases)
## 🤠 Credits
- This project gets inspiration and several pieces of logical code from [react-multiple-select](https://github.com/Khan/react-multi-select/)
- [TypeScript](https://github.com/microsoft/typescript)
## 📜 License
MIT © [harshzalavadiya](https://github.com/harshzalavadiya)