React.js Blueprint Suggest

Last Updated : 19 Sep, 2022

BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.

Suggest component offered by BlueprintJS: Suggest component renders a UI that allows us to choose among multiple items from a list. It renders a text input as the Popover component target instead of arbitrary children.

Suggest props:

activeItem: It denotes the currently focused/active item which would be used for keyboard interactions.
className: It denotes a list of class names to pass along to a child element.
closeOnSelect: It determines whether the popover should be closed after an item is selected.
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: With this, one can create a selectable Create Item option from the current query string.
defaultSelectedItem: It denotes the uncontrolled default selected item.
disabled: It determines whether the input field should be disabled
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 passed to the InputGroup component
inputValueRenderer: It allows us to custom render and transforms the item into a string to pass to an input value.
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.
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.
openOnKeyDown: It determines whether the component should wait until a key down event in the TagInput before opening its popover.
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.
selectedItem: It denotes the currently active item or null if no item is selected.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

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

cd foldername

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: It will look like the following:

Example 1: In this example, we will try to create a simple dropdown application that allows us to search among items using Suggest component provided by BlueprintJS.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

App.js

import './App.css'; 
import { Suggest } 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'; 
  
const defaultItems = ['USA', 'CANADA', 'INDIA'] 
  
function App() { 
    const [item, setItem] = useState('A'); 
  
    return ( 
        <div style={{ width: '200px' }}> 
            <Suggest 
                activeItem={item} 
                items={defaultItems} 
                selectedItem={item} 
                itemPredicate={(query, film, _index, exactMatch) => { 
                    const normalizedTitle = film?.toLowerCase(); 
                    const normalizedQuery = query.toLowerCase(); 
  
                    if (exactMatch) { 
                        return normalizedTitle === normalizedQuery; 
                    } else { 
                        return normalizedTitle.includes(normalizedQuery) 
                    } 
                }} 
                itemRenderer={(val, itemProps) => { 
                    return ( 
                        <MenuItem 
                            key={val} 
                            text={val} 
                            onClick={(elm) => { 
                                setItem(elm.target.textContent) 
                            }} 
                            active={itemProps.modifiers.active} 
                        /> 
                    ); 
                }} 
                onItemSelect={() => { }} 
                tagRenderer={(item) => item} 
                inputValueRenderer={(item) => item.toString()} 
            /> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, let’s put an initial content that gets rendered when there is no query. Change your App.js like the one below.

App.js

import './App.css'; 
import { Suggest } 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'; 
  
const defaultItems = ['USA', 'CANADA', 'INDIA'] 
  
function App() { 
    const [item, setItem] = useState('A'); 
  
    return ( 
        <div style={{ width: '200px' }}> 
            <Suggest 
                initialContent={'GERMANY'} 
                activeItem={item} 
                items={defaultItems} 
                selectedItem={item} 
                itemPredicate={(query, film, _index, exactMatch) => { 
                    const normalizedTitle = film?.toLowerCase(); 
                    const normalizedQuery = query.toLowerCase(); 
  
                    if (exactMatch) { 
                        return normalizedTitle === normalizedQuery; 
                    } else { 
                        return normalizedTitle.includes(normalizedQuery) 
                    } 
                }} 
                itemRenderer={(val, itemProps) => { 
                    return ( 
                        <MenuItem 
                            key={val} 
                            text={val} 
                            onClick={(elm) => { 
                                setItem(elm.target.textContent) 
                            }} 
                            active={itemProps.modifiers.active} 
                        /> 
                    ); 
                }} 
                onItemSelect={() => { }} 
                tagRenderer={(item) => item} 
                inputValueRenderer={(item) => item.toString()} 
            /> 
        </div> 
    ); 
} 
  
export default App;