React.js Blueprint ContextMenu2 Usage

Last Updated : 25 Aug, 2022

Blueprint is a React-based UI toolkit for the web. It is optimized for building complex data-dense interfaces for desktop applications. This package contains the core set of UI components such as CSS and React code.

ContextMenu2 is used to render div wrapper elements around its children so that an event handler can be attached to get DOM ref for detecting theme or layout.

Syntax:

<ContextMenu2
    content={
        <Menu>
            <MenuItem text="..." />
        </Menu>
    }
></ContextMenu2>

Setting up React.js application:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory 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/popover2

Project Structure: The project structure will look like this:

Example 1: In this example, we will use the ContextMenu2 component. On right click, three menu options will be displayed, and on click of every option we have onClick handler function which will trigger and we can see the output in web console.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React from "react"; 
import { Menu } from "@blueprintjs/core"; 
import { ContextMenu2, MenuItem2 }  
    from "@blueprintjs/popover2"; 
  
const App = (props) => { 
    const searchClickHandler = () => { 
        console.log("Search Around - Clicked") 
    } 
    const objectClickHandler = () => { 
        console.log("Object Viewer - Clicked") 
    } 
  
    const removeClickHandler = () => { 
        console.log("Remove - Clicked") 
    } 
    return ( 
        <ContextMenu2 
            content={ 
                <Menu> 
                    <MenuItem2 icon="search-around"
                        text="Search around..."
                        onClick={searchClickHandler} /> 
                    <MenuItem2 icon="search"
                        text="Object viewer"
                        onClick={objectClickHandler} /> 
                    <MenuItem2 icon="graph-remove"
                        text="Remove"
                        onClick={removeClickHandler} /> 
                </Menu> 
            } 
        > 
            <div className="my-context-menu-target"> 
                Right click me! 
            </div> 
        </ContextMenu2> 
    ); 
}; 
  
export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, we will use the ContextMenu2 component. On right click, two menu options will be displayed, and on click of the first option we have onClick handler function which will trigger and we can see the output in web console, and on hovering to second option we have nested options listed under the second menu.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React from "react"; 
import { Menu } from "@blueprintjs/core"; 
import { ContextMenu2, MenuItem2 }  
    from "@blueprintjs/popover2"; 
const App = (props) => { 
  
    const searchClickHandler = () => { 
        console.log("Search Around - Clicked") 
    } 
    return ( 
        <ContextMenu2 
            content={ 
                <Menu> 
                    <MenuItem2 icon="search-around"
                        text="Search around..."
                        onClick={searchClickHandler} /> 
                    <MenuItem2 icon="layout"
                        text="Layout..."> 
                        <MenuItem2 icon="layout-auto"
                            text="Auto" /> 
                        <MenuItem2 icon="layout-circle"
                            text="Circle" /> 
                        <MenuItem2 icon="layout-grid"
                            text="Grid" /> 
                    </MenuItem2> 
                </Menu> 
            } 
        > 
            <div className="my-context-menu-target"> 
                Right click me! 
            </div> 
        </ContextMenu2> 
    ); 
}; 
  
export default App;