React.js Blueprint Select2 Controlled usage

Last Updated : 16 Oct, 2022

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 React.js Blueprint Select2 Controlled usage. Select2 component displays a list of items to choose one item and item children are wrapped in a MenuItem that contains the list and an optional InputGroup to filter the items. We can control the input values and items of the list using activeItem and query props.

React.js BluePrint Select2 Props:

activeItem: It denotes the currently active item that is used for keyboard interactions.
children– It denotes the element which triggers the select popover.
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.
filterable– It determines whether the dropdown list can be filtered.
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.
onQueryChange: It is a callback function that gets invoked when the query string is changed.
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.

Syntax:

<Select2
    activeItem={...}
    onActiveItemChange={...}
    query={...}
    onQueryChange={...}>
   
    <Button disabled={true}>
</Select2>

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
npm install @blueprintjs/select

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: Below is the example that demonstrates the usage of the controlled active items in the select2 component.

Javascript

import React, { useState } from "react"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select2 } from "@blueprintjs/select"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
const data = ["Java", "Python", "C++", "SQL", "JavaScript"] 
  
function App() { 
    const [item, setItem] = useState("Java"); 
    const [items, setItems] = useState([]); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeek</h1> 
                <h2>ReactJs Blueprint Select2 Controlled usage</h2> 
            </div> 
            <Select2 
                items={data} 
                activeItem={data[4]} 
                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={setItem} 
            > 
                <Button text={item} rightIcon="caret-down" /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;

Output:

Example 2: Below is another example that demonstrates the usage of the controlled query in the select2 component.

Javascript

import React, { useState } from "react"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select2 } from "@blueprintjs/select"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
const data = ["Java", "Python", "C++", "SQL", "JavaScript"] 
  
function App() { 
    const [item, setItem] = useState(""); 
    const [items, setItems] = useState([]); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint Select2 Controlled usage</h2> 
            </div> 
            <Select2 
                items={data} 
                activeItem={data[2]} 
                onQueryChange={setItem} 
                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} 
                        /> 
                    ); 
                }} 
            > 
                <Button text={item} rightIcon="caret-down" /> 
            </Select2> 
        </center> 
    ); 
} 
  
export default App;