Skip to content
Related Articles

Related Articles

React.js Blueprint MultiSelect2 Props interface

Improve Article
Save Article
  • Last Updated : 06 Oct, 2022
Improve Article
Save Article

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 MultiSelect2 Props interface. The MultiSelect2 component displays a UI of the list of items through which a user can choose multiple items. MultiSelect2 renders a TagInput wrapped in a Popover2.

React.js BluePrint MultiSelect2 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 listbox 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:

<MultiSelect2 
    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, itemRenderer, onItemSelect, onRemove, onClear, etc props of the MultiSelect2 component.

Javascript




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";
  
export default function App() {
  
    const [item, setItem] = useState("");
    const [items, setItems] = useState([]);
  
    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint MultiSelect2 Props Interface</h2>
            </div>
            <div style={{ width: 500 }}>
                <MultiSelect2
                    items={["C++", "JavaScript "
                        "Java", "Python", "NodeJs"]}
                    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>
        </center>
    );
}


Output:

 

Example 2: The below example demonstrates the usage of placeholder and activeItem props of the MultiSelect2 component.

Javascript




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";
  
export default function App() {
  
    const [item, setItem] = useState("Python");
    const [items, setItems] = useState([]);
  
    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint MultiSelect2 Props Interface</h2>
            </div>
            <div style={{ width: 500 }}>
                <MultiSelect2
                    activeItem={item}
                    items={["C++", "JavaScript "
                        "Java", "Python", "NodeJs"]}
                    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}
                            />
                        );
                    }}
                    placeholder="Select languages..."
                    onItemSelect={() => { }}
                    tagRenderer={(item) => item}
                    onRemove={(item) => {
                        setItems((items) => items.filter(
                            (elm) => elm !== item));
                    }}
                    onClear={() => setItems([])}
                />
            </div>
        </center>
    );
}


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!