React.js Blueprint MultiSelect2

In this article, we will learn about the MultiSelect2 component offered by the blueprint.js library. BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.

MultiSelect2 component offered by BlueprintJS: MultiSelect2 component renders a UI that allows us to choose among multiple items from a list. It renders a TagInput component wrapped in a Popover2 component, both offered by BlueprintJS.

MultiSelect2 props:

• activeItem: It denotes the currently focused/active item which would be 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: With this, one can create a selectable Create Item option from the current query string.
• fill: It determines whether the component should take up the full width of its container. 
• disabled: It specifies whether the component will be disabled or interactive.
• initialContent: It denotes the default React component that renders when the query string is empty.
• 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.
• 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.
• 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. 
• popoverProps: It denotes the props to spread to Popover.
• query: It denotes the query string passed to itemListPredicate or itemPredicate to filter items.
• 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.
• disabled: Whether the component is non-interactive.

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: Use the following command to move to your project folder after creating it, i.e., foldername:

cd foldername

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

npm install @blueprintjs/core
npm install @blueprintjs/select

Project Structure: It will look like the following.

Example 1: Now write down the following code in the App.js file. Our default component, App, is where we have written our code in this case.

Javascript

import './App.css';
import { MultiSelect2 } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from 'react';

function App() {
    const [item, setItem] = useState('A');
    const [items, setItems] = useState([]);

    return (
        <div className="container" style={{ width: '30%' }}>
            <MultiSelect2
                activeItem={item}
                items={["A", "B", "C"]}
                selectedItems={items}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                            onClick={(elm) => {
                                setItem(elm.target.textContent)
                                setItems((items) => {
                                    return [...items, elm.target.textContent]
                                })
                            }}
                            active={itemProps.modifiers.active}
                        />
                    );
                }}
                onItemSelect={() => { }}
                tagRenderer={(item) => item}
                onRemove={(item) => {
                    setItems(items => items.filter(elm => elm !== item))
                }}
                onClear={() => setItems([])}
            />
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, let’s change the placeholder for search input. Change your App.js like the below:

Javascript

import './App.css';
import { MultiSelect2 } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from 'react';

function App() {
    const [item, setItem] = useState('USA');
    const [items, setItems] = useState([]);

    return (
        <div className="container" style={{ width: '30%' }}>
            <MultiSelect2
                tagInputProps={{ placeholder: 'Search for a country' }}
                activeItem={item}
                items={["India", "USA", "Canada"]}
                selectedItems={items}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                            onClick={(elm) => {
                                setItem(elm.target.textContent)
                                setItems((items) => {
                                    return [...items, elm.target.textContent]
                                })
                            }}
                            active={itemProps.modifiers.active}
                        />
                    );
                }}
                onItemSelect={() => { }}
                tagRenderer={(item) => item}
                onRemove={(item) => {
                    setItems(items => items.filter(elm => elm !== item))
                }}
                onClear={() => setItems([])}
            />
        </div>
    );
}

export default App;

Output:

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