{"id":14957443,"url":"https://github.com/keyvaluesoftwaresystems/react-multi-selection-ui","last_synced_at":"2025-10-01T17:30:40.594Z","repository":{"id":153330328,"uuid":"628896013","full_name":"KeyValueSoftwareSystems/react-multi-selection-ui","owner":"KeyValueSoftwareSystems","description":"React Multi Selection UI Component with search functionality","archived":false,"fork":false,"pushed_at":"2024-02-20T22:23:25.000Z","size":2110,"stargazers_count":8,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T05:24:41.536Z","etag":null,"topics":["multi-selection","next-js","react","typescript"],"latest_commit_sha":null,"homepage":"","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/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-04-17T07:52:06.000Z","updated_at":"2024-07-16T09:01:05.000Z","dependencies_parsed_at":"2023-11-30T07:25:36.001Z","dependency_job_id":"66c394f5-43bc-434c-a243-f0af94add0d3","html_url":"https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui","commit_stats":{"total_commits":24,"total_committers":4,"mean_commits":6.0,"dds":0.5833333333333333,"last_synced_commit":"8b092cb9283f3c9e2931058952fbc63fd06be773"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-multi-selection-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-multi-selection-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-multi-selection-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-multi-selection-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/react-multi-selection-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883314,"owners_count":18901365,"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":["multi-selection","next-js","react","typescript"],"created_at":"2024-09-24T13:14:54.522Z","updated_at":"2025-10-01T17:30:40.091Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Multi Selection UI\n\n\u003ca  href=\"https://www.npmjs.com/package/@keyvaluesystems/react-multi-selection-ui-component\"\u003e\u003cimg  src=\"https://badgen.net/npm/v/@keyvaluesystems/react-multi-selection-ui-component?color=blue\"  alt=\"npm version\"\u003e\u003c/a\u003e \u003ca  href=\"https://www.npmjs.com/package/@keyvaluesystems/react-multi-selection-ui-component\"  \u003e\u003cimg  src=\"https://img.shields.io/npm/dw/@keyvaluesystems/react-multi-selection-ui-component?label=Downloads\"  /\u003e\u003c/a\u003e \u003ca  href=\"https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui\"\u003e\u003cimg  src=\"https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui/actions/workflows/deploy.yml/badge.svg\"  alt=\"\"  /\u003e\u003c/a\u003e\n\n\u003cdiv  align=\"center\"\u003e\n\u003cimg  src=\"./screenshot.png\"  alt=\"\"  width=\"400\"  height=\"230\"/\u003e\n\u003c/div\u003e\n\n\u003e A pre-built, customizable Multi-Selection UI component with an integrated search feature\n\nTry tweaking a multi selection ui component using this codesandbox link \u003ca  href=\"https://codesandbox.io/s/react-multi-select-cy5x78?file=/src/App.js\"\u003ehere\u003c/a\u003e\n\n## Installation\n\nThe easiest way to use react-multi-selection-ui-component is to install it from npm and build it into your app with Webpack.\n\n```bash\n\nnpm install  @keyvaluesystems/react-multi-selection-ui-component\n\n```\n\nYou’ll need to install React separately since it isn't included in the package.\n\nNote for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.\n\n## Usage\n\nReact Multi Selection UI can run in a very basic mode by just providing the `options` like given below:\n\n```jsx\nimport MultiSelection from \"@keyvaluesystems/react-multi-selection-ui-component\";\n\n\u003cMultiSelection options={optionsArray} /\u003e;\n```\n\nThe optionsArray consists of objects with the following keys:\n\n- `id`: A unique identifier for each option.\n- `name`: A string representing the label for each option.\n- `checked`: An optional boolean value indicating the default state of the option\n\nAn example for options array is shown below:\n\n```jsx\nconst optionsArray = [\n  {\n    id: 1,\n    name: \"Option 1\",\n    checked: true,\n  },\n  {\n    id: 2,\n    name: \"Option 2\",\n  },\n];\n```\n\n## v1.0.0 (Major Version Change)\n\nThis release includes breaking changes, new features, and updates. Please read this document carefully before upgrading\n\n### Breaking Changes\n\n- The `productList` prop has been renamed to `options`, and now each object within the options array includes an additional optional `checked` property.\n- The `zeroState` prop is deprecated.\n- Significant alterations have been made to the UI behavior.\n  Please take note of these changes during the upgrade\n\n### Migration Steps\n\n- Update Options Prop: The `productList` prop has been renamed to `options`. Use the `options` prop to pass the list of items.\n- Replace `searchPlaceholder` with placeholder:The `searchPlaceholder` prop has been replaced with `placeholder`.\n- Utilize `renderEmptyItem` Prop: To pass the empty state component, use the renderEmptyItem prop.\n\n\u003cb\u003eBefore\u003c/b\u003e\n\n```jsx\n\u003cMultiSelection\n  productList={yourProductList}\n  searchPlaceholder=\"Type to search...\"\n  zeroState={{\n    selectionList: \u003cYourCustomEmptyState /\u003e,\n    selectedList: \u003cYourCustomEmptyState /\u003e,\n  }}\n/\u003e\n```\n\n\u003cb\u003eAfter\u003c/b\u003e\n\n```jsx\n\u003cMultiSelection\n  options={yourProductList}\n  placeholder=\"Type to search...\"\n  renderEmptyItem={\u003cYourCustomEmptyState /\u003e}\n/\u003e\n```\n\n## Props\n\nProps that can be passed to the component are listed below:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eProp\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eoptions:\u003c/b\u003e object[]\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nAn array of objects to specify the id, name and default state of each option\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eshowCheckbox?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to control the display of checkbox in the selection list\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eplaceholder?:\u003c/b\u003e string\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe placeholder value for the search text box if search is enabled and default text shown in the box if search is disabled\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003e'Choose an option'\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003ehideSelected?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to control the display of selected values in the list\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003ehideSearch?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to control the display of search text box in the selection list\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eonSearch?:\u003c/b\u003e function\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe callback function which will be triggered on text change in the search box\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eonItemClick?:\u003c/b\u003e function\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe callback function which will be triggered on clicking the menu item row. Can be used for obtaining the clicked row id\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003esetSelectedValues?:\u003c/b\u003e function\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe callback function which will be triggered on clicking the check box and chip's close button. Can be used for obtaining the selected id's\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003estyles?:\u003c/b\u003e object\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nProvides you with a bunch of callback functions to override the default styles.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eshowChips?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to control the display of selected options as chips.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003edropdownMaxHeight?:\u003c/b\u003e string | number\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe prop to control the height of the dropdown modal.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003e'100%'\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderEmptyItem?:\u003c/b\u003e JSX\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe JSX element to be shown in case of empty result.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eNo other options\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eisLoading?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to show loading state in the dropdown list.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderLoader?:\u003c/b\u003e JSX\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe JSX element to be shown while loading.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eDefault loader component\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003ehasError?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe boolean value to indicate error.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003ehelperText?:\u003c/b\u003e ''\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nTo display an additional message.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003e''\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003ethresholdForBubble?:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nShow the bubble when the count of selected items reaches this threshold.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003elength of options array\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eicons?:\u003c/b\u003e object\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nProvides you with an object to replace the default icons used.\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003e\u003cb\u003eclearSearchClick?:\u003c/b\u003e function\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\nThe callback function which will be triggered on clicking close icon inside search box\n\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Style Customizations\n\nAll the default styles provided by this package are overridable using the `style` prop.\nthe below code shows all the overridable styles:\n\n```jsx\n\u003cMultiSelection\n options={optionsArray}\n styles={{\n    Container?: {...styles},\n    SearchComponent?: {...styles},\n    HelperText?: {...styles},\n    InputBox?: {...styles},\n    CheckedIcon?: {...styles},\n    UnCheckedIcon?: {...styles},\n    ChipCloseIcon?: {...styles},\n    SearchIcon?: {...styles},\n    ArrowIcon?: {...styles},\n    HiddenChipsIndicator?: {...styles},\n    ClearSearchIcon?: {...styles},\n    SelectedMenuItem?: (id) =\u003e ({...styles}),\n    UnSelectedMenuItem?: (id) =\u003e ({...styles}),\n    ChipComponent?: (id) =\u003e ({...styles}),\n }}\n/\u003e\n```\n\nTo customize the style of various components, you can use the following prop names, each of which accepts a style object:\n\n- `ArrowIcon`: Overrides the style of the right-arrow icon.\n- `Container`: Overrides the style of the multi-selection UI container.\n- `CheckedIcon`: Overrides the style of the checked icon.\n- `ChipCloseIcon`: Overrides the style of the close icon within the chip.\n- `ClearSearchIcon`: Overrides the style of the close icon within the search box.\n- `HelperText`: Overrides the style of the helper text.\n- `HiddenChipsIndicator`: Overrides the style of the bubble indicating the number of hidden chips if the thresholdForBubble prop has a value.\n- `InputBox`: Overrides the style of the box containing the chips and search bar. Can be used to style the placeholder if the search is hidden.\n- `SearchIcon`: Overrides the style of the search icon.\n- `SearchComponent`: Overrides the styles of the search component.\n- `UnCheckedIcon`: Overrides the style of the unchecked box.\n\nYou can utilize the provided prop names to customize the style of individual items in the chip or each item in the menu. This can be achieved by passing a function that returns the desired style for each element.\n\n- `ChipComponent` - Overrides the chip style\n- `SelectedMenuItem` - Overrides the selected menu item styles\n- `UnSelectedMenuItem` - Overrides the non selected item styles\n\n## Icon Customizations\n\nThe `icons` prop allows for the customization of default icons provided by this package\nThe following code displays the icons that can be customized\n\n```jsx\n\u003cMultiSelection\n options={optionsArray}\n icons={{\n    Arrow?: url || JSX.Element,\n    ChipClose?: url || JSX.Element,\n    Checked?: url || JSX.Element,\n    ClearSearch?: url || JSX.Element,\n    Search?: url || JSX.Element\n }}\n/\u003e\n```\n\n- `Arrow` - Overrides the down arrow(right)\n- `ChipClose` - Overrides the chip close icon\n- `Checked` - Overrides the checkbox checked icon\n- `ClearSearch` - Overrides the close icon inside search box\n- `Search` - Overrides the search icon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-multi-selection-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-multi-selection-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-multi-selection-ui/lists"}