{"id":13403534,"url":"https://github.com/kenshoo/react-multi-select","last_synced_at":"2025-04-05T18:06:55.939Z","repository":{"id":46056928,"uuid":"123248673","full_name":"kenshoo/react-multi-select","owner":"kenshoo","description":"A Multi Select component built with and for React","archived":false,"fork":false,"pushed_at":"2022-07-11T18:21:20.000Z","size":37307,"stargazers_count":120,"open_issues_count":43,"forks_count":53,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-03-29T17:09:38.724Z","etag":null,"topics":["component","components","frontend","managedby-tec-dev","material-ui","multi-select","multiselect","public-repo","react","react-component","react-multiselect","reactjs","reactjs-components","select","selection","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://kenshoo.github.io/react-multi-select","language":"JavaScript","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/kenshoo.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}},"created_at":"2018-02-28T07:47:22.000Z","updated_at":"2024-08-22T13:27:15.000Z","dependencies_parsed_at":"2022-09-01T05:40:10.552Z","dependency_job_id":null,"html_url":"https://github.com/kenshoo/react-multi-select","commit_stats":null,"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-multi-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-multi-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-multi-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenshoo%2Freact-multi-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenshoo","download_url":"https://codeload.github.com/kenshoo/react-multi-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378141,"owners_count":20929296,"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":["component","components","frontend","managedby-tec-dev","material-ui","multi-select","multiselect","public-repo","react","react-component","react-multiselect","reactjs","reactjs-components","select","selection","ui","ui-components"],"created_at":"2024-07-30T19:01:31.255Z","updated_at":"2025-04-05T18:06:55.922Z","avatar_url":"https://github.com/kenshoo.png","language":"JavaScript","readme":"# Multi select\n\n[![Build Status](https://travis-ci.org/kenshoo/react-multi-select.svg?branch=master)](https://travis-ci.org/kenshoo/react-multi-select) [![npm version](https://badge.fury.io/js/%40kenshooui%2Freact-multi-select.svg)](https://badge.fury.io/js/%40kenshooui%2Freact-multi-select) [![Test Coverage](https://api.codeclimate.com/v1/badges/6242f7063a82be5a265e/test_coverage)](https://codeclimate.com/github/kenshoo/react-multi-select/test_coverage)\n\n**Kenshoo multi select component**\n\n**[react-multi-select demo](https://kenshoo.github.io/react-multi-select)**\n\nMulti select is a straight forward component that helps a user select multiple items in a clear and filterable way.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"preview.gif?raw=true\" width=\"600\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n **Installation using npm:**\n\n```\n npm install @kenshooui/react-multi-select --save\n```\n\n **Installation using Yarn:**\n\n```\n yarn add @kenshooui/react-multi-select\n```\n\n ## Import styles\n\nInclude the component's css on your app\n\n ```jsx\nimport \"@kenshooui/react-multi-select/dist/style.css\"\n ```\n\n ## How to use\n\n\n\n```jsx\nimport React, { Component } from \"react\";\nimport MultiSelect from \"@kenshooui/react-multi-select\";\n\nclass Example extends Component {\n  constructor(props) {\n    super(props);\n    this.handleChange = this.handleChange.bind(this);\n    this.state = {\n      items: [\n        { id: 0, label: \"item 1\" },\n        { id: 2, label: \"item 2\", disabled: true },\n        { id: 3, label: \"item 3\", disabled: false },\n        { id: 4, label: \"item 4\" }\n      ],\n      selectedItems: []\n    };\n  }\n\n  handleChange(selectedItems) {\n    this.setState({ selectedItems });\n  }\n  render() {\n    const { items, selectedItems } = this.state;\n    return (\n      \u003cMultiSelect\n        items={items}\n        selectedItems={selectedItems}\n        onChange={this.handleChange}\n      /\u003e\n    );\n  }\n}\n```\n\n\n## Properties\n\n| Name                          | Type        | Default        | Description                                                                                             |\n| :---------------------------- | :---------- | :------------- | :------------------------------------------------------------------------------------------------------ |\n| `items`                       | `List`      | []             | list of items.                                                                                          |\n| `selectedItems`               | `Array`     | []             | selected list to start with (subgroup of items).                                                        |\n| `onChange`                    | `function`  | ()=\u003e{}         | callback for changed event.                                                                             |\n| `loading`                     | `boolean`   | false          | toggle to show loading indication.                                                                      |\n| `messages`                    | `Object`    | {}             | custom messages. Please see below for the availabale messages.                                          |\n| `showSearch   `               | `boolean`   | true           | toggle to show search option.                                                                           |\n| `showSelectAll`               | `boolean`   | true           | toggle to show select all option in list.                                                               |\n| `showSelectedItems`           | `boolean`   | true           | toggle to show selected items right pane.                                                               |\n| `wrapperClassName`            | `String`    | ''             | wrapper class name - Used for customizing the style.                                                    |\n| `height`                      | `number`    | 400            | available items list height.                                                                            |\n| `itemHeight`                  | `number`    | 40             | the height of an item in the list.                                                                      |\n| `selectedItemHeight`          | `number`    | `itemHeight`   | the height of the selected item in the list.                                                            |\n| `selectAllHeight`             | `number`    | `itemHeight`   | the height of the selectAll component, by default will use the value of the itemHeight.                 |\n| `maxSelectedItems`            | `number`    |                | defines the maximum items that can be selected, overrides showSelectAll.                                |\n| `filterFunction`              | `function`  | based on label | The function used to filter items based on the search query.                                            |\n| `searchRenderer`              | `Component` |                | Component to replace the default Search component.                                                      |\n| `selectedItemRenderer`        | `Component` |                | Component to replace the default selected item component in the destination list.                       |\n| `loaderRenderer`              | `Component` |                | Component to replace the default loader component.                                                      |\n| `selectAllRenderer`           | `Component` |                | Component to replace the default select all component.                                                  |\n| `itemRenderer`                | `Component` |                | Component to replace the default item component in the source list.                                     |\n| `selectionStatusRenderer`     | `Component` |                | Component to replace the default selection status component.                                            |\n| `noItemsRenderer`             | `Component` |                | Component to replace the default no items component.                                                    |\n| `searchValue`                 | `string`    |                | The value of the search field.                                                                          |\n| `searchValueChanged`          | `function`  |                | Function to handle the change of search field. Accepts value as a single argument.                      |\n| `responsiveHeight`            | `string`    | 400px          | Responsive height of the wrapping component, can send percent for example: `70%`                        |\n| `withGrouping`                | `boolean`   | false          | Your items will be grouped by the group prop values - see \"item grouping\" section below                 |\n| `showSelectedItemsSearch`     | `boolean`   | false          | toggle to show search option in detination list.                                                        |\n| `searchSelectedItemsValue`    | `string`    |                | The value of the search field for destination list.                                                     |\n| `searchSelectedItemsChanged`  | `function`  |                | Function to handle the change of search field for destination list. Accepts value as a single argument. |\n| `selectedItemsFilterFunction` | `function`  | based on label | Is the same as filterFunction by default to filter items based on the search query in destination list. |\n| `isLocked`              | `function`  | `item =\u003e item.disabled`  |  Function to be used to define whether item is locked or not|\n\n## Customization\n\n#### Renderers\n\nYou can replace the renderers of the following components:\n\n\u003cbr/\u003e\n\n**Item**\n\nUse the `itemRenderer` to replace the default component.\n\nEach item receives the following props:\n\n`item` - holds your item data\n\n`height` - receives the height defined by the list\n\n`onClick` - the event to toggle selection on the component\n\n`checked` - indicates if the item is selected\n\n`indeterminate` - used by the select all component to display indeterminate mode\n\n`disabled` - defines if item should be disabled. Item won't be clickable for selection and will be ignored when clicking \"Select All\".\n\n`group` - group item - no checkbox, not clickable, black colored\n\n\u003cbr/\u003e\n\n**Select All**\n\nUse the `selectAllRenderer` to replace the default component.\n\nThe `SelectAll` component receives the following props:\n\n`height` - receives the height defined by the parent\n\n`onClick` - Triggers the select all/clear all event on click\n\n`isAllSelected` - Indicates that all items are selected\n\n`selectAllMessage` - Defines the message for the `SelectAll` component\n\n`selectedIds` - holds a list of ids of all the selected items\n\n\u003cbr/\u003e\n\n**Selected Item**\n\nUse the `selectAllRenderer` to replace the default component.\n\nThe `SelectedItem` component receives the following props:\n\n`item` - holds your item data\n\n`height` - receives the height defined by the list\n\n\nYou can disable specific selected items by passing `item.disabled: true` or pass `isLocked` function which will be used to define whether the item is disabled.\n\nExample (selected \u0026 disabled):\n```javascript\nfunction Exemple(){\n  const items = [{id:0,label: 'item 0'}, {id:1,label: 'item 1'}];\n  return (\n        \u003cMultiSelect\n          isLocked={item =\u003e item.label === 'item 0'}\n          items={items}\n          selectedItems={items}\n        /\u003e\n}\n```\n\u003cbr/\u003e\n\n**Search**\n\nUse the `searchRenderer` to replace the default component.\n\nThe `Search` component receives the following props:\n\n`searchPlaceholder` - defines the message to display in the search placeholder\n\n`onChange` - triggers the action of changing the search value\n\n\u003cbr/\u003e\n\n**Selection Status**\n\nUse the `selectionStatusRenderer` to replace the default component.\n\nThe `SelectionStatus` component receives the following props:\n\n`selected` - an array of all the selected ids\n\n`clearAll` - callback to clear all selected items\n\n`clearAllMessage` - text to display in the clear all text\n\n`noneSelectedMessage` - text to display when no items are selected\n\n`selectedMessage` - text to display when there are items selected\n\n\u003cbr/\u003e\n\n**Loader**\n\nUse the `loaderRenderer` to replace the default component.\n\nDoes not receive any props.\n\n\u003cbr/\u003e\n\n**No Items**\n\nUse the `noItemsRenderer` to replace the default component.\n\nDoes not receive any props.\n\n\u003cbr/\u003e\n\n#### Search Function\n\nIn order to accommodate complex item filters, you can provide your own filter method in the `filterFunction` prop.\n\nExample (default):\n```javascript\nvalue =\u003e item =\u003e\n  String(item.label)\n    .toLowerCase()\n    .includes(value.toLowerCase())\n```\n\nPerforms search on server side\n```javascript\nvalue =\u003e {\n    callServer(value).then(items =\u003e this.setState({items}));\n    // At the end return the expected method\n    return item =\u003e true;\n}\n```\n\n#### Messages\n\nYou can use your own messages. Here is the default messages object:\n```jsx\n messages: {\n    searchPlaceholder: \"Search...\",\n    noItemsMessage: \"No Items...\",\n    noneSelectedMessage: \"None Selected\",\n    selectedMessage: \"selected\",\n    selectAllMessage: \"Select All\",\n    clearAllMessage: \"Clear All\",\n    disabledItemsTooltip: \"You can only select 1 file\"\n  }\n```\n\n#### Item grouping\n\nYou can add also grouping to your items - add a group prop with the group name as a value to each of your items and add withGrouping prop as well.\n```jsx\n \u003cMultiSelect\n    items={[{id: 1, label: \"item1\", group: \"group1\"},\n            {id: 2, label: \"item2\", group: \"group1\"}\n            {id: 3, label: \"item3\", group: \"group2\"}]}\n    withGrouping\n    selectedItems={selectedItems}\n    onChange={this.handleChange}\n  /\u003e\n```\n\n## How to Contribute\n\n#### Setting up development environment\n\n1. Fork the repository and create your branch from `master`.\n2. Install the project: `yarn install`\n3. Run tests: `yarn test` or `yarn test:watch`\n4. Run dev environment: `yarn storybook` and head to [https://localhost:6006](https://localhost:6006)\n\n\n#### Issuing a change\n\n1. Push to github.\n2. If you’ve fixed a bug or added code that should be tested, add tests.\n3. Open a Pull Request with the following guidelines:\n   - Set title prefix to feature/bug and supply a descriptive PR title.\n   - Add description to your Pull Request describing your change.\n4. Once your Pull Request is issued, the test suite and build processes will run and your change will be reviewed.\n\n\n## Compatibility\n\n  - React 16 or newer\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenshoo%2Freact-multi-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenshoo%2Freact-multi-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenshoo%2Freact-multi-select/lists"}