React.js Blueprint Select2 Creating new items

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:

• Introduction and Installation reactJS.
• React.js Blueprint MenuItem
• React Hook useState

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