React.js Blueprint MultiSelect Props interface

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss the React.js Blueprint MultiSelect Props interface. The MultiSelect component displays a UI of the list of items through which a user can choose multiple items. MultiSelect renders a TagInput wrapped in a Popover.

React.js BluePrint MultiSelect Props:

• activeItem: It denotes the currently active item that is used for keyboard interactions.
• className: It denotes a list of class names to pass along to a child element.
• createNewItemFromQuery: It allows the creation of new items from the current query string provided.
• createNewItemPosition: It denotes the createNewItem position within the list, either first or last.
• createNewItemRenderer: It helps in creating a selectable Create Item option from the current query string.
• disabled: It specifies whether the component will be disabled or interactive.
• fill: It determines whether the component should take up the full width of its container. 
• initialContent: It denotes the default React component that renders when the query string is empty.
• inputProps: It denotes the props that are used to spread to the query InputGroup.
• itemDisabled: It determines whether the given item is disabled.
• itemListPredicate: It is used to customize the querying of entire items array, passed as props. 
• itemListRenderer: It is used to custom render the contents of the dropdown.
• itemPredicate: It is used to customize the querying of individual items of the items array.
• itemRenderer: It is used to custom render an item in the dropdown list.
• items: It denotes the array of items in the list.
• itemsEqual: It is used in determining whether the two items are equal.
• menuProps: It denotes the props that are used to spread to the Menu list box containing the selectable options.
• noResults: It is used to render a React component when the filtering returns zero results.
• onActiveItemChange: It is a callback function that gets Invoked when user interaction changes the active item.
• onItemSelect: It is a callback function that gets invoked when an item from the list gets selected, typically by clicking or pressing the enter key.
• onItemsPaste: It is a callback function that gets invoked when multiple items get selected at once.
• onClear: It will render a clear button inside its TagInput.
• onQueryChange: It is a callback function that gets invoked when the query string is changed.
• onRemove: It is a callback function that gets invoked when an item gets removed from the selection by removing its tag in the TagInput.
• openOnKeyDown: It determines whether the component should wait until a key down event in the TagInput before opening its popover.
• placeholder: It denotes the Input placeholder text. 
• popoverContentProps: It denotes the props that are used to spread to the Popover2 content wrapper element.
• popoverProps: It denotes the props to spread to Popover.
• popoverRef: It denotes the optional ref for the Popover2 instance.
• popoverTargetProps: It denotes the props that are used to add to the popover target wrapper element.
• query: It denotes the query string passed to itemListPredicate or itemPredicate to filter items.
• resetOnClose: It determines whether the active item should be reset to the first matching item when the popover closes.
• resetOnQuery: It determines whether the active item should reset to the first matching item every time the query changes.
• resetOnSelect: It determines whether the active item should be reset to the first matching item when an item is selected.
• scrollToActiveItem: It determines whether the active item should always be scrolled into view when the prop changes.
• selectedItems: It denotes the list of controlled selected values.
• tagInputProps: It denotes the props to spread to TagInput.
• tagRenderer: It is used to transform an item into tag content.

Syntax:

<MultiSelect
    items={ITEM_DATA}
    onClear={...}
      ...
/>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

 

Step 4: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of items, selectedItems, tagRenderer, onItemSelect, onRemove, onClear, etc props of the MultiSelect component.

Output:

 

Example 2: The below example demonstrates the usage of activeItems and placeholder props of the MultiSelect component.

Output:

 

Reference: https://blueprintjs.com/docs/#select/multi-select.props-interface