React Multi Selection UI

A customizable ready to use Multi Selection UI component with Search feature

Try tweaking a multi selection ui component using this codesandbox link here

Installation

The easiest way to use react-multi-selection-ui is to install it from npm and build it into your app with Webpack.

npm install  @keyvaluesystems/react-multi-selection-ui

You’ll need to install React separately since it isn't included in the package.

Usage

React Multi Selection UI can run in a very basic mode by just providing the productList like given below:

import  MultiSelection  from  '@keyvaluesystems/react-multi-selection-ui';

<MultiSelection
  productList={productListArray}
/>

The productList is an array of objects with the following keys:

• id - a unique identifier for each product

• name - a string that represents each product

An example for productList array is shown below:

const  productListArray = [
  {
    id:  1,
    name:  'Product 1'
  },
  {
    id:  2,
    name:  'Product 2'
  }
]

You can use hideSearch prop to hide/show the search feature in the selection list (left menu). With the help of showCheckbox prop, the checkbox near the selection list can be shown/hidden. searchPlaceholder gives an option to customise the placeholder shown inside the Search text box.

<MultiSelection
 productList={productListArray}
 hideSearch={false}
 showCheckbox={true}
 searchPlaceholder="Search"
/>

You can specify whether to show or hide the selected values in the selection list(left list) with the help of hideSelected prop.

Zero-states can be customised for both list using zeroState prop. We can provide JSX elements for both selected list and selection list in this.

<MultiSelection
 productList={productListArray}
 hideSelected={true}
/>

Props

Props that can be passed to the component are listed below:

Prop	Description	Default
productList: object[]	An array of product objects to specifying the id and name of each product	[]
showCheckbox?: boolean	The boolean value to control the display of checkbox in the selection list	true
searchPlaceholder?: string	The placeholder value for the search text box	true
hideSelected?: boolean	The boolean value to control the display of selected values in the selected list(right list)	'Search products'
hideSearch?: boolean	The boolean value to control the display of search text box in the selection list	false
hideSelected?: boolean	The boolean value to control the display of selected values in the selected list(right list)	false
zeroState?: object	To specify the zerostate components to be rendered in both lists	{selectionList: undefined, selectedList: undefined}
onSearch?: function	The callback function which will be triggered on text change in the search box	undefined
setSelectedValues?: function	The callback function which will be triggered on the selection of product list values. Can be used for obtaining the selected values	undefined
styles?: object	Provides you with a bunch of callback functions to override the default styles.	undefined

Style Customizations

All the default styles provided by this package are overridable using the style prop. the below code shows all the overridable styles:

<DotMatrix
 dataPoints={dataPointsArray}
 styles={{
	SelectionListZeroState?: () =>  ({...styles}),
	SelectedListZeroState?: () =>  ({...styles}),
	SearchComponent?: () =>  ({...styles}),
	ProductComponent?: () =>  ({...styles}),
	SelectedComponent?: () =>  ({...styles}),
	SelectedCloseIcon?: () =>  ({...styles}),
	Container?: () =>  ({...styles})
 }}
/>

• Container - overrides the multi selection ui container style
• SelectionListZeroState - overrides the selection list zero state container
• SelectedListZeroState - overrides the selected list zero state container
• SearchComponent - overrides the search component styles
• ProductComponent - overrides the selection component (left list)
• SelectedComponent - overrides the selected component(right list)
• SelectedCloseIcon - overrides the selected component close icon