{"id":26461879,"url":"https://github.com/shakiraliswe/nextjs-multiselect-example","last_synced_at":"2026-04-13T05:38:20.655Z","repository":{"id":250820610,"uuid":"835567521","full_name":"ShakirAliSWE/nextjs-multiselect-example","owner":"ShakirAliSWE","description":"This is the example of multiselect with search in nextjs14","archived":false,"fork":false,"pushed_at":"2024-07-30T05:47:56.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-30T09:08:09.498Z","etag":null,"topics":["dropdownlist","multiselect-drodpdown","nextjs14"],"latest_commit_sha":null,"homepage":"https://nextjs-multiselect.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShakirAliSWE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-07-30T05:26:52.000Z","updated_at":"2024-07-30T09:08:16.086Z","dependencies_parsed_at":"2024-07-30T09:08:13.639Z","dependency_job_id":"ecc13492-793d-4077-9ca7-44606be4d247","html_url":"https://github.com/ShakirAliSWE/nextjs-multiselect-example","commit_stats":null,"previous_names":["shakiraliswe/nextjs-multiselect-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShakirAliSWE%2Fnextjs-multiselect-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShakirAliSWE%2Fnextjs-multiselect-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShakirAliSWE%2Fnextjs-multiselect-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShakirAliSWE%2Fnextjs-multiselect-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShakirAliSWE","download_url":"https://codeload.github.com/ShakirAliSWE/nextjs-multiselect-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244358433,"owners_count":20440360,"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":["dropdownlist","multiselect-drodpdown","nextjs14"],"created_at":"2025-03-19T05:10:18.334Z","updated_at":"2025-12-31T00:12:25.199Z","avatar_url":"https://github.com/ShakirAliSWE.png","language":"JavaScript","funding_links":[],"categories":[],"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://s5.ezgif.com/tmp/ezgif-5-c533265e9e.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%2Fshakiraliswe%2Fnextjs-multiselect-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakiraliswe%2Fnextjs-multiselect-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakiraliswe%2Fnextjs-multiselect-example/lists"}