React.js Blueprint MultiSelect

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.

MultiSelect component offered by Blueprint.js:

MultiSelect component renders a UI that allows us to choose among multiple items from a list. It renders a TagInput component wrapped in a Popover component, both offered by Blueprint.js.

MultiSelect 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. 
• 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.

Creating React Application And Installing Module

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

npx create-react-app foldername

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

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: In this example, we will try to create a simple dropdown application using MultiSelect component provided by BlueprintJS.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import './App.css';
import { MultiSelect } 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');
    return (
        <div className="container">
            <MultiSelect
                activeItem={item}
                items={["A", "B", "C"]}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                            onClick={(elm) => {
                                setItem(elm.target.textContent)
                            }}
                            active={itemProps.modifiers.active}
                        />
                    );
                }}
                onItemSelect={() => { }}
                tagRenderer={(item) => item}
            />
        </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 in our dropdown component for search input. Change your App.js like the one below.

Javascript

import './App.css';
import { MultiSelect } 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');
    return (
        <div className="container">
            <MultiSelect
                tagInputProps={{
                    placeholder: 'Search for a country'
                }}
                activeItem={item}
                items={["India", "USA", "Canada"]}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                            onClick={(elm) => {
                                setItem(elm.target.textContent)
                            }}
                            active={itemProps.modifiers.active}
                        />
                    );
                }}
                onItemSelect={() => { }}
                tagRenderer={(item) => item}
            />
        </div>
    );
}

export default App;

Output:

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