React.js Blueprint Select Props Interface

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 the React.js Blueprint Select Props interface. The select 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.

React.js BluePrint Select 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.
matchTargetWidth: It determines whether the select popover should be styled so that it matches the width of the target.
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.
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:

<Select
    items={ITEM}
    itemPredicate={filterData}
    ...
>
    <Button>
</Select>

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 5: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of items, selectedItems, itemRenderer, and onItemSelect props of the select component.

Javascript

import React, { useState } from "react"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select } from "@blueprintjs/select"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
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 Select Props Interface</h2> 
            </div> 
            <Select 
                items={["Java", "Python", "C++", "SQL", "JavaScript"]} 
                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={setItem} 
            > 
                <Button text={item} rightIcon="caret-down" /> 
            </Select> 
        </center> 
    ); 
} 
  
export default App;

Output:

Example 2: Below is another example that demonstrates the usage of disabled and fill props of the select component.

Javascript

import React, { useState } from "react"; 
import { Button, MenuItem } from "@blueprintjs/core"; 
import { Select } from "@blueprintjs/select"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
  
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 Select Props Interface</h2> 
            </div> 
            <Select 
                items={["Java", "Python", "C++", "SQL", "JavaScript"]} 
                selectedItems={items} 
                disabled={true} 
                fill={true} 
                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" /> 
            </Select> 
        </center> 
    ); 
} 
  
export default App;