@kenshooui/react-multi-select

Multi select

Kenshoo multi select component

react-multi-select demo

Multi select is a straight forward component that helps a user select multiple items in a clear and filterable way.

Installation

Installation using npm:

 npm install @kenshooui/react-multi-select --save

Installation using Yarn:

 yarn add @kenshooui/react-multi-select

How to use

import React, { Component } from "react";
import MultiSelect from "@kenshooui/react-multi-select";

class Example extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      items: [
        { id: 0, label: "item 1" },
        { id: 2, label: "item 2" },
        { id: 3, label: "item 3" },
        { id: 4, label: "item 4" }
      ],
      selectedItems: []
    };
  }

  handleChange(selectedItems) {
    this.setState({ selectedItems });
  }
  render() {
    const { items, selectedItems } = this.state;
    return (
      <MultiSelect
        items={items}
        selectedItems={selectedItems}
        onChange={this.handleChange}
      />
    );
  }
}

Properties

Name	Type	Default	Description
items	List	[]	list of items .
selectedItems	Array	[]	selected list to start with (subgroup of items).
onChange	function	()=>{}	callback for changed event
loading	boolean	false	toggle to show loading indication.
messages	Object	{}	custom messages. Please see below for the availabale messages
showSearch	boolean	true	toggle to show search option.
showSelectAll	boolean	true	toggle to show select All option in list.
wrapperClassName	String	''	wrapper class name. Used for customizing the style
height	number	400	available items list height
itemHeight	number	40	the height of an item in the list
maxSelectedItems	number		defines the maximum items that can be selected. Overrides showSelectAll
filterFunction	function	based on label	The function used to filter items based on the search query
searchRenderer	Component		Component to replace the default Search component
selectedItemRenderer	Component		Component to replace the default selected item component in the destination list
loaderRenderer	Component		Component to replace the default loader component
selectAllRenderer	Component		Component to replace the default select all component
itemRenderer	Component		Component to replace the default item component in the source list

Customization

Renderers

You can replace the renderes of the following components:

Item

Use the itemRenderer to replace the default component.

Each item receives the following props:

item - holds your item data

height - receives the height defined by the list

onClick - the event to toggle selection on the component

checked - indicates if the item is selected

indeterminate - used by the select all component to display indeterminate mode

disabled - defines if item should be disabled

Select All

Use the selectAllRenderer to replace the default component.

The Select All component receives the following props:

height - receives the height defined by the parent

onClick - Triggers the select all/clear all event on click

isAllSelected - Indicates that all items are selected

selectAllMessage - Defines the message for the Select All component

selectedIds - holds a list of ids of all the selected items

Selected Item

Use the selectAllRenderer to replace the default component.

The Selected Item component receives the following props:

item - holds your item data

height - receives the height defined by the list

Search

Use the searchRenderer to replace the default component.

The Search component receives the following props:

searchPlaceholder - defines the message to display in the search placeholder

onChange - triggers the action of changing the search value

Loader

Use the loaderRenderer to replace the default component.

Does not receive any props.

Search Function

In order to accomidate complex item filters, you can provide your own filter method in the filterFunction prop.

Example (default):

value => item =>
  String(item.label)
    .toLowerCase()
    .includes(value.toLowerCase())

Messages

You can use your own messages. Here is the default messages object :

 messages: {
    searchPlaceholder: "Search...",
    noItemsMessage: "No Items...",
    noneSelectedMessage: "None Selected",
    selectedMessage: "delected",
    selectAllMessage: "Select All",
    clearAllMessage: "Clear All"
  }

How to Contribute

Setting up development environment

1. Fork the repository and create your branch from master.
2. To install the project: yarn install
3. Running tests: yarn test or yarn test:watch
4. Running dev environment to work on yarn storybook and head to https://localhost:6006

Issuing a change

1. Push to github.

2. If you’ve fixed a bug or added code that should be tested, add tests.

3. Open a Pull Request with the following guidelines:

   • Set title prefix to feature/bug and supply a descriptive PR title.
   • Add description to your Pull Request describing your change.

4. Once your Pull Request is issued the test suite and build processes will run and we will review your change.

Compatibility

• React 16 or newer