Open In App

React.js Blueprint Select2 Creating new items

Improve
Improve
Like Article
Like
Save
Share
Report

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

The React.js Blueprint Select2 component provides a list of items to the user with a search box to search for items in the list or to add new items to the list.

The createNewItemFromQuery prop converts the user query to a form that is understandable by the Select2 component, and the createNewItemRenderer renders the item that will be eventually shown in the list. 

Select2 props:

  • className: It is a space-delimited list of class names to pass along to a child element.
  • createNewItemFromQuery: It helps to create new items from the query string.
  • createNewItemPosition: It specifies the position of the new item in the list.
  • activeItem: The currently focused item from the list.
  • createNewItemRendere: It helps to transform the current query string into a selectable option in the list.
  • disabled: It is a boolean value. It determines whether the component is in an active state or not.
  • fill: It is a boolean value. It determines whether the component should take up the full width of its container or not.
  • filterable: It is a boolean value. It determines whether the dropdown list can be filtered or not.
  • initialContent: It defines the initial string when the query string is empty.
  • inputProps: It defines the props to spread to the query InputGroup.
  • itemDisabled: A callback function to determine if the given item is disabled or not.
  • itemListPredicate: It customizes the query array.
  • itemListRenderer: It renders the content of the dropdown.
  • itemPredicate: It customizes queries for individual items in the list.
  • itemRenderer: It is a custom renderer for an item in the dropdown list.
  • items: It determines the list of array items.
  • itemsEqual: A comparator to compare two list items.
  • menuProps: The menu props spread to the Menu list box containing the selectable options.
  • noResults: The content to render when filtering items returns no results.
  • onActiveItemChange: A callback function gets triggered when the user moves to other items.
  • onItemSelect: A void callback function is triggered when an item is selected.
  • onItemsPaste: A void callback function triggered when multiple items are selected, i,e when we paste.
  • onQueryChange: A void callback function is triggered when the query string changes.
  • popoverContentProps:  The popover props spread the content wrapper element.
  • popoverProps: The popover props to spread.
  • popoverRef: The ref of popover component.
  • popoverTargetProps: It defines the props to add to the popover target wrapper element.
  • query: The string passed to the render.
  • resetOnClose: It is a boolean value. It determines whether the active item should be reset to the first matching item when the popover closes or not.
  • resetOnQuery: It is a boolean value. It determines whether the active item should be reset to the first matching item every time any changes occur or not.
  • resetOnSelect: It is a boolean value. It determines whether the active item should be reset to the first matching item when an item is selected or not.
  • scrollToActiveItem: It is a boolean value. It determines whether the active item should always be scrolled into view when the prop changes or not.

Syntax:

<Select2
   createNewItemFromQuery={}
   createNewItemRenderer={}
/>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

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

cd project

Step 3: Now install the dependency by using the following command:

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

Project Structure: It will look like this.

 

Example 1: We are importing MenuItem from “@blueprintjs/core” and Select2 from “@blueprintjs/select”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and “@blueprintjs/select/lib/css/blueprint-select.css”. We are adding the Select2 Component, adding the MenuItem component that renders the items list we passed and we have passed a custom function addText to the createNewItemFromQuery prop which returns a string and the createNewItemRenderer prop returns the value.

App.js

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
 
function App() {
    const addText = (s) => {
        return s;
    }
    return (
        <div style={{ margin: 30 }}>
            <h3>ReactJs Blueprint Select2 Creating new items</h3>
            <Select2
                createNewItemFromQuery={addText}
                createNewItemRenderer={(val) => {
                    return val;
                }}
                items={[
                    "Blockchain",
                    "Internet of things"
                ]}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                        />
                    );
                }}
                onItemSelect={() => { }}
            >
                <button> Click Me !</button>
            </Select2>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: In this example, to the above code we have created an item state using react useState hook, that adds the items to the list.

App.js

Javascript




import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { MenuItem } from "@blueprintjs/core";
import { Select2 } from "@blueprintjs/select";
import "@blueprintjs/select/lib/css/blueprint-select.css";
 
function App() {
    const [item, setItem] = useState("");
    const addItem = (s) => {
        return s;
    }
    return (
        <div style={{ margin: 30 }}>
            <h3>ReactJs Blueprint Select2 Creating new items</h3>
            <Select2
                createNewItemFromQuery={addItem}
                createNewItemRenderer={(val) => {
                    return <MenuItem
                        key={val}
                        text={val}
                        onClick={(elm) => {
                            setItem(elm.target.textContent);
                        }}
                    />
                }}
                items={[
                    "Blockchain",
                    "Internet of things"
                ]}
                itemRenderer={(val, itemProps) => {
                    return (
                        <MenuItem
                            key={val}
                            text={val}
                            onClick={(elm) => {
                                setItem(elm.target.textContent);
                            }}
                        />
                    );
                }}
                onItemSelect={setItem}
            >
                <button>click me</button>
 
                <h5>Selected : {item}</h5>
            </Select2>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://blueprintjs.com/docs/#select/select2.creating-new-items



Last Updated : 04 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads