React Multi Selection UI Component with search functionality
MIT License
A pre-built, customizable Multi-Selection UI component with an integrated search feature
Try tweaking a multi selection ui component using this codesandbox link here
The easiest way to use react-multi-selection-ui-component is to install it from npm and build it into your app with Webpack.
npm install @keyvaluesystems/react-multi-selection-ui-component
You’ll need to install React separately since it isn't included in the package.
Note 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.
React Multi Selection UI can run in a very basic mode by just providing the options
like given below:
import MultiSelection from "@keyvaluesystems/react-multi-selection-ui-component";
<MultiSelection options={optionsArray} />;
The optionsArray consists of objects with the following keys:
id
: A unique identifier for each option.name
: A string representing the label for each option.checked
: An optional boolean value indicating the default state of the optionAn example for options array is shown below:
const optionsArray = [
{
id: 1,
name: "Option 1",
checked: true,
},
{
id: 2,
name: "Option 2",
},
];
This release includes breaking changes, new features, and updates. Please read this document carefully before upgrading
productList
prop has been renamed to options
, and now each object within the options array includes an additional optional checked
property.zeroState
prop is deprecated.productList
prop has been renamed to options
. Use the options
prop to pass the list of items.searchPlaceholder
with placeholder:The searchPlaceholder
prop has been replaced with placeholder
.renderEmptyItem
Prop: To pass the empty state component, use the renderEmptyItem prop.Before
<MultiSelection
productList={yourProductList}
searchPlaceholder="Type to search..."
zeroState={{
selectionList: <YourCustomEmptyState />,
selectedList: <YourCustomEmptyState />,
}}
/>
After
<MultiSelection
options={yourProductList}
placeholder="Type to search..."
renderEmptyItem={<YourCustomEmptyState />}
/>
Props that can be passed to the component are listed below:
All the default styles provided by this package are overridable using the style
prop.
the below code shows all the overridable styles:
<MultiSelection
options={optionsArray}
styles={{
Container?: {...styles},
SearchComponent?: {...styles},
HelperText?: {...styles},
InputBox?: {...styles},
CheckedIcon?: {...styles},
UnCheckedIcon?: {...styles},
ChipCloseIcon?: {...styles},
SearchIcon?: {...styles},
ArrowIcon?: {...styles},
HiddenChipsIndicator?: {...styles},
ClearSearchIcon?: {...styles},
SelectedMenuItem?: (id) => ({...styles}),
UnSelectedMenuItem?: (id) => ({...styles}),
ChipComponent?: (id) => ({...styles}),
}}
/>
To customize the style of various components, you can use the following prop names, each of which accepts a style object:
ArrowIcon
: Overrides the style of the right-arrow icon.Container
: Overrides the style of the multi-selection UI container.CheckedIcon
: Overrides the style of the checked icon.ChipCloseIcon
: Overrides the style of the close icon within the chip.ClearSearchIcon
: Overrides the style of the close icon within the search box.HelperText
: Overrides the style of the helper text.HiddenChipsIndicator
: Overrides the style of the bubble indicating the number of hidden chips if the thresholdForBubble prop has a value.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.SearchIcon
: Overrides the style of the search icon.SearchComponent
: Overrides the styles of the search component.UnCheckedIcon
: Overrides the style of the unchecked box.You 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.
ChipComponent
- Overrides the chip styleSelectedMenuItem
- Overrides the selected menu item stylesUnSelectedMenuItem
- Overrides the non selected item stylesThe icons
prop allows for the customization of default icons provided by this package
The following code displays the icons that can be customized
<MultiSelection
options={optionsArray}
icons={{
Arrow?: url || JSX.Element,
ChipClose?: url || JSX.Element,
Checked?: url || JSX.Element,
ClearSearch?: url || JSX.Element,
Search?: url || JSX.Element
}}
/>
Arrow
- Overrides the down arrow(right)ChipClose
- Overrides the chip close iconChecked
- Overrides the checkbox checked iconClearSearch
- Overrides the close icon inside search boxSearch
- Overrides the search icon