{"id":13454449,"url":"https://github.com/hc-oss/react-multi-select-component","last_synced_at":"2025-04-08T00:36:55.223Z","repository":{"id":37240453,"uuid":"224713762","full_name":"hc-oss/react-multi-select-component","owner":"hc-oss","description":"Lightweight (~5KB gzipped) multiple selection dropdown component","archived":false,"fork":false,"pushed_at":"2023-12-09T16:35:26.000Z","size":6110,"stargazers_count":389,"open_issues_count":51,"forks_count":92,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T23:34:00.949Z","etag":null,"topics":["checkboxes","component","dropdown","hacktoberfest","multiselect","react","react-select","select","select-all","typescript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-multi-select-example-uqtgs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hc-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"harshzalavadiya"}},"created_at":"2019-11-28T19:03:39.000Z","updated_at":"2025-03-18T22:57:24.000Z","dependencies_parsed_at":"2024-06-18T12:39:31.029Z","dependency_job_id":null,"html_url":"https://github.com/hc-oss/react-multi-select-component","commit_stats":{"total_commits":419,"total_committers":20,"mean_commits":20.95,"dds":"0.45584725536992843","last_synced_commit":"a0a6f67a7cb3ef5515ec934e41af7f71549511e1"},"previous_names":["harshzalavadiya/react-multi-select-component"],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-multi-select-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-multi-select-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-multi-select-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-multi-select-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hc-oss","download_url":"https://codeload.github.com/hc-oss/react-multi-select-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755560,"owners_count":20990620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkboxes","component","dropdown","hacktoberfest","multiselect","react","react-select","select","select-all","typescript"],"created_at":"2024-07-31T08:00:54.161Z","updated_at":"2025-04-08T00:36:55.205Z","avatar_url":"https://github.com/hc-oss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/harshzalavadiya"],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-multi-select-component\n\nSimple and lightweight multiple selection dropdown component with `checkboxes`, `search` and `select-all`\n\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://react-multi-select-component.pages.dev/)\n[![GitHub Actions Status](https://github.com/hc-oss/react-multi-select-component/workflows/NodeJS/badge.svg)](https://github.com/hc-oss/react-multi-select-component/actions)\n[![NPM](https://img.shields.io/npm/v/react-multi-select-component.svg)](https://npm.im/react-multi-select-component)\n[![gzip](https://badgen.net/bundlephobia/minzip/react-multi-select-component@latest)](https://bundlephobia.com/result?p=react-multi-select-component@latest)\n\n## ✨ Features\n\n- 🕶 Zero Dependency\n- 🍃 Lightweight (\u003c5KB)\n- 💅 Themeable\n- ✌ Written w/ TypeScript\n\n## 🔧 Installation\n\n```bash\nnpm i react-multi-select-component    # npm\nyarn add react-multi-select-component # yarn\n```\n\n## 📦 Example\n\n![Example](https://user-images.githubusercontent.com/5774849/150685427-6025d7d3-ddfc-4787-a856-241c4cc100cb.gif)\n\n```tsx\nimport React, { useState } from \"react\";\nimport { MultiSelect } from \"react-multi-select-component\";\n\nconst options = [\n  { label: \"Grapes 🍇\", value: \"grapes\" },\n  { label: \"Mango 🥭\", value: \"mango\" },\n  { label: \"Strawberry 🍓\", value: \"strawberry\", disabled: true },\n];\n\nconst Example = () =\u003e {\n  const [selected, setSelected] = useState([]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eSelect Fruits\u003c/h1\u003e\n      \u003cpre\u003e{JSON.stringify(selected)}\u003c/pre\u003e\n      \u003cMultiSelect\n        options={options}\n        value={selected}\n        onChange={setSelected}\n        labelledBy=\"Select\"\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Example;\n```\n\nMore examples can be found [here ↗](https://react-multi-select-component.pages.dev/)\n\n## 👀 Props\n\n| Prop                  | Description                                                                                                                                       | Type                         | Default        |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |\n| `labelledBy`          | value for `aria-labelledby`                                                                                                                       | `string`                     |                |\n| `options`             | options for dropdown                                                                                                                              | `[{label, value, disabled}]` |                |\n| `value`               | pre-selected rows                                                                                                                                 | `[{label, value}]`           | `[]`           |\n| `hasSelectAll`        | toggle 'Select All' option                                                                                                                        | `boolean`                    | `true`         |\n| `isLoading`           | show spinner on select                                                                                                                            | `boolean`                    | `false`        |\n| `shouldToggleOnHover` | toggle dropdown on hover option                                                                                                                   | `boolean`                    | `false`        |\n| `overrideStrings`     | [localization ↗](stories/recipes/localization.stories.mdx)                                                                                                    | `object`                     |                |\n| `onChange`            | onChange callback                                                                                                                                 | `function`                   |                |\n| `disabled`            | disable dropdown                                                                                                                                  | `boolean`                    | `false`        |\n| `disableSearch`       | hide search textbox                                                                                                                               | `boolean`                    | `false`        |\n| `filterOptions`       | [custom filter options (async supported) ↗](stories/recipes/custom-filter.stories.mdx)                                                                        | `function`                   | Fuzzy Search   |\n| `className`           | class name for parent component                                                                                                                   | `string`                     | `multi-select` |\n| `valueRenderer`       | [custom dropdown header ↗](stories/recipes/custom-value.stories.mdx)                                                                                          | `function`                   |                |\n| `ItemRenderer`        | [custom dropdown option ↗](stories/recipes/custom-item.stories.mdx)                                                                                           | `function`                   |                |\n| `ClearIcon`           | Custom Clear Icon for Search                                                                                                                      | `ReactNode`                  |                |\n| `ArrowRenderer`       | Custom Arrow Icon for Dropdown                                                                                                                    | `ReactNode`                  |                |\n| `debounceDuration`    | debounce duration for Search                                                                                                                       | `number`                     | `300`          |\n| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items (Hint: Pass `null` to prevent it from rendering completely)                                                  | `ReactNode`                  |                |\n| `isCreatable`         | Allows user to create unavailable option(s) [example ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-default) | `boolean`                    | `false`        |\n| `onCreateOption`      | allows to override newly created option [example ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-custom)      | `function`                   |                |\n| `closeOnChangedValue` | automatically closes dropdown when its value is changed                                                                                           | `boolean`                    | `false`        |\n\n## 📝 Changelog\n\nFor every release changelog/migration-guide will be available in [releases](https://github.com/hc-oss/react-multi-select-component/releases)\n\n## 🤠 Credits\n\n- This project gets inspiration and several pieces of logical code from [react-multiple-select](https://github.com/Khan/react-multi-select/)\n- [TypeScript](https://github.com/microsoft/typescript)\n\n## 📜 License\n\nMIT \u0026copy; [harshzalavadiya](https://github.com/harshzalavadiya)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Freact-multi-select-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhc-oss%2Freact-multi-select-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Freact-multi-select-component/lists"}