React.js Blueprint ContextMenu2 Props

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 ContextMenu2 Props. Context menus display a list of actions after right-clicking on a target element. The ContextMenu2 is just a replacement for ContextMenu and ContextMenuTarget.

React.js BluePrint ContextMenu2 Props:

• children: It denotes the context menu target.
• className: It denotes a space-delimited list of class names to pass along to a child element.
• content: It displays menu content and is usually a Blueprint <Menu> component.
• disabled: It determines whether the context menu is disabled.
• onContextMenu: It is an optional context menu event handler and is used when we want to do something with the mouse event unrelated to rendering the context menu itself when setting a state in react.
• popoverProps: It denotes a limited subset of props to forward along to the popover generated by the contextMenu component.
• tagName: It denotes a HTML tag used for container element.

Syntax:

<ContextMenu
    content={...}
    ...
>
    <div>Right Click</div>
</ContextMenu>

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

Step 4: Installing @blueprintjs popover2 component.

npm install @blueprintjs/popover2

Project Structure:

Step 5: Run the project as follows:

npm start

Example 1: The below example demonstrates the basic usage of the contextMenu2 component.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu } from "@blueprintjs/core";
import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2";
import "@blueprintjs/select/lib/css/blueprint-select.css";

function App() {
    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint ContextMenu2 Props</h2>
            </div>
            <ContextMenu2
                content={
                    <Menu>
                        <MenuItem2 icon="git-repo" text="Git Repo" />
                        <MenuItem2 icon="git-commit" text="Commit" />
                        <MenuItem2 icon="git-merge" text="Merge" />
                        <MenuItem2 icon="git-branch" text="Branch" />
                    </Menu>
                }
            >
                <div
                    className="my-context-menu-target"
                    style={{
                        backgroundColor: "#1EA902",
                        color: "white",
                        width: 100,
                        padding: 10,
                        borderRadius: 20,
                    }}
                >
                    Right Click
                </div>
            </ContextMenu2>
        </center>
    );
}

export default App;

Output:

Example 2: The below example demonstrates the usage of the disabled contextMenu2 component.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu } from "@blueprintjs/core";
import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2";
import "@blueprintjs/select/lib/css/blueprint-select.css";

function App() {
    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint ContextMenu2 Props</h2>
            </div>
            <ContextMenu2
                disabled={true}
                content={
                    <Menu>
                        <MenuItem2 icon="git-repo" text="Git Repo" />
                        <MenuItem2 icon="git-commit" text="Commit" />
                        <MenuItem2 icon="git-merge" text="Merge" />
                        <MenuItem2 icon="git-branch" text="Branch" />
                    </Menu>
                }
            >
                <div
                    className="my-context-menu-target"
                    style={{
                        backgroundColor: "#1EA902",
                        color: "white",
                        width: 100,
                        padding: 10,
                        borderRadius: 20,
                    }}
                >
                    Right Click
                </div>
            </ContextMenu2>
        </center>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#popover2-package/context-menu2.props