React.js Blueprint ContextMenu2 Advanced usage

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 Advanced usage. Context menus display a list of actions after right-clicking on a target element. The ContextMenu2 is just a replacement for ContextMenu and ContextMenuTarget. The ContextMenu2 by default renders a wrapper element around its children to attach an event handler but If this element breaks the HTML or CSS layout and want to remove it, then that can be done by using ContextMenu2 advanced rendering API.

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 advanced 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";
import classNames from "classnames";

export default function App() {
    return (
        <center>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs Blueprint ContextMenu2 Advanced usage
                </h2>
            </div>
            <ContextMenu2
                content={
                    <Menu>
                        <MenuItem2 text="Download" />
                        <MenuItem2 text="Print" />
                        <MenuItem2 text="Delete" intent="danger" />
                    </Menu>
                }
            >
                {(ContextMenu2ChildrenProps) => (
                    <div
                        className={classNames
                            ("my-context-menu-target",
                            ContextMenu2ChildrenProps.className)}
                        onContextMenu=
                            {ContextMenu2ChildrenProps.onContextMenu}
                        ref={ContextMenu2ChildrenProps.ref}
                        style={{
                            backgroundColor: "#1EA902",
                            color: "white",
                            width: 100,
                            padding: 10,
                            borderRadius: 20,
                        }}
                    >
                        {ContextMenu2ChildrenProps.popover}
                        Right click me!
                    </div>
                )}
            </ContextMenu2>
        </center>
    )
}

Output:

Example 2: The below example demonstrates the advanced 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";
import classNames from "classnames";

export default function App() {
    return (
        <center>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs Blueprint ContextMenu2 Advanced usage
                </h2>
            </div>
            <ContextMenu2
                disabled={true}
                content={
                    <Menu>
                        <MenuItem2 text="Download" />
                        <MenuItem2 text="Print" />
                        <MenuItem2 text="Delete" intent="danger" />
                    </Menu>
                }
            >
                {(ContextMenu2ChildrenProps) => (
                    <div
                        className={classNames
                            ("my-context-menu-target",
                        ContextMenu2ChildrenProps.className)}
                        onContextMenu={
                            ContextMenu2ChildrenProps.onContextMenu}
                        ref={ContextMenu2ChildrenProps.ref}
                        style={{
                            backgroundColor: "#1EA902",
                            color: "white",
                            width: 150,
                            padding: 10,
                            borderRadius: 20,
                        }}
                    >
                        {ContextMenu2ChildrenProps.popover}
                        Right click disabled!
                    </div>
                )}
            </ContextMenu2>
        </center>
    )
}

Output:

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