Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hc-oss/react-multi-select-component
Lightweight (~5KB gzipped) multiple selection dropdown component
https://github.com/hc-oss/react-multi-select-component
checkboxes component dropdown hacktoberfest multiselect react react-select select select-all typescript
Last synced: 3 days ago
JSON representation
Lightweight (~5KB gzipped) multiple selection dropdown component
- Host: GitHub
- URL: https://github.com/hc-oss/react-multi-select-component
- Owner: hc-oss
- License: mit
- Created: 2019-11-28T19:03:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-09T16:35:26.000Z (about 1 year ago)
- Last Synced: 2024-12-01T10:52:25.656Z (11 days ago)
- Topics: checkboxes, component, dropdown, hacktoberfest, multiselect, react, react-select, select, select-all, typescript
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-multi-select-example-uqtgs
- Size: 5.83 MB
- Stars: 387
- Watchers: 3
- Forks: 89
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - hc-oss/react-multi-select-component - Lightweight (~5KB gzipped) multiple selection dropdown component (TypeScript)
README
# react-multi-select-component
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 (
Select Fruits
{JSON.stringify(selected)}
);
};
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)