Context Menu in React Diagram Component

21 Oct 202524 minutes to read

In graphical user interfaces, a context menu appears when you perform a right-click operation, offering users a set of actions relevant to the current context. The React Diagram component provides extensive context menu customization capabilities through the contextMenuSettings property.

The Diagram control includes built-in context menu items and allows you to define custom menu items. This flexibility enables you to tailor menus to specific application needs, including creating nested levels of menu items for complex user interactions.

Prerequisites

To ensure the context menu renders correctly, include the necessary CSS references from the Syncfusion® ej2-navigations package by adding the following line to your src/styles.css file:

@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

NOTE

If you want to use contextMenu in diagram, you need to inject DiagramContextMenu Module in the diagram.

Default Context Menu

The Diagram component provides default context menu items for frequently used commands. Use the show property to enable or disable the context menu.

The following code demonstrates how to enable the default context menu items:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject } from "@syncfusion/ej2-react-diagrams";

let diagramInstance;
let connector = [{
        id: 'connector1',
        sourceID: 'node1',
        targetID: 'node2',
        type: 'Straight',
       
}];

let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{content: 'Rectangle2'}],
    }
];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
            //Enables the context menu
            show: true,
        }}>
      <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,NodeModel,ConnectorModel, DiagramContextMenu, Inject } from "@syncfusion/ej2-react-diagrams";

let diagramInstance: DiagramComponent;
let connector: ConnectorModel[] = [{
        id: 'connector1',
        sourceID: 'node1',
        targetID: 'node2',
        type: 'Straight',
       
}];

let node: NodeModel[] = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{content: 'Rectangle2'}],
    }
];

//Initializes the Diagram component
function App() {
        return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
                //Enables the context menu
                show: true,
            }}>
        <Inject services={[DiagramContextMenu]}/>
        </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Customize Context Menu

You can customize context menus for individual nodes by defining specific menu items beyond the default options. To add custom context menu items, define and incorporate them into the items property of the context menu.

Each custom item can be defined with specific text and ID using thetext and ID properties, respectively. Additionally, you can enhance visual cues by associating icons through the iconCss for enabling the use of font icons. The target property specifies where each menu item should appear, and separators can be included using the separator property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the items property of a parent menu item.

Display Custom Menu Only

To display only custom context menu items, set the showCustomMenuOnly property to true.

Context Menu Click

Handle custom menu item actions using the contextMenuClick event. This event triggers when a menu item is clicked and allows you to define specific actions based on the selected item.

The following example demonstrates context menu click handling for node cloning and color changes:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject } from "@syncfusion/ej2-react-diagrams";

let diagramInstance;

let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1',content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}],
    }
];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}  
        contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  // Text to be displayed
                  text: 'Fill',
                  items: [
                    { id: 'red', text: 'Red' },
                    { id: 'yellow', text: 'Yellow' },
                    { id: 'green', text: 'Green' },
                    { id: 'blue', text: 'Blue' },
                  ],
                  //Sets the id for the item
                  id: 'fill',
                  target: '.e-elementcontent',
                  // Sets the css icons for the item
                  iconCss: 'e-icons e-paint-bucket',
                },
                {
                  text: 'Annotation color',
                  id: 'annotationColor',
                  items: [
                    { id: 'pink', text: 'Pink' },
                    { id: 'orange', text: 'Orange' },
                    { id: 'violet', text: 'Violet' },
                    { id: 'brown', text: 'Brown' },
                  ],
                  target: '.e-elementcontent',
                  iconCss: 'e-icons e-font-color',
                },
                {
                  text: 'Clone',
                  id: 'clone',
                  target: '.e-elementcontent',
                  iconCss: 'e-icons e-copy',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
        }}  

        contextMenuClick={(args) => {
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            if (selectedNode && args.item.id !== 'fill' && args.item.id !== 'annotationColor') {
                if (
                    args.item.text === 'Red' ||
                    args.item.text === 'Blue' ||
                    args.item.text === 'Yellow' ||
                    args.item.text === 'Green'
                ) {
                    selectedNode.style.fill = args.item.text;
                    diagramInstance.dataBind();
                } else if (
                    args.item.text === 'Pink' ||
                    args.item.text === 'Violet' ||
                    args.item.text === 'Orange' ||
                    args.item.text === 'Brown'
                ) {
                    selectedNode.annotations[0].style.fill = args.item.text;
                    diagramInstance.dataBind();
                } else {
                    diagramInstance.copy();
                    diagramInstance.paste();
                }
            }
        }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject, NodeModel } from "@syncfusion/ej2-react-diagrams";
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

let diagramInstance: DiagramComponent ;

let node: NodeModel[] = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1',content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}],
    }
];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}  
        contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  // Text to be displayed
                  text: 'Fill',
                  items: [
                    { id: 'red', text: 'Red' },
                    { id: 'yellow', text: 'Yellow' },
                    { id: 'green', text: 'Green' },
                    { id: 'blue', text: 'Blue' },
                  ],
                  //Sets the id for the item
                  id: 'fill',
                  target: '.e-elementcontent',
                  // Sets the css icons for the item
                  iconCss: 'e-icons e-paint-bucket',
                },
                {
                  text: 'Annotation color',
                  id: 'annotationColor',
                  items: [
                    { id: 'pink', text: 'Pink' },
                    { id: 'orange', text: 'Orange' },
                    { id: 'violet', text: 'Violet' },
                    { id: 'brown', text: 'Brown' },
                  ],
                  target: '.e-elementcontent',
                  iconCss: 'e-icons e-font-color',
                },
                {
                  text: 'Clone',
                  id: 'clone',
                  target: '.e-elementcontent',
                  iconCss: 'e-icons e-copy',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
        }}  

        contextMenuClick={(args: MenuEventArgs) => {
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            if (selectedNode && args.item.id !== 'fill' && args.item.id !== 'annotationColor') {
                if (
                    args.item.text === 'Red' ||
                    args.item.text === 'Blue' ||
                    args.item.text === 'Yellow' ||
                    args.item.text === 'Green'
                ) {
                    selectedNode.style.fill = args.item.text;
                    diagramInstance.dataBind();
                } else if (
                    args.item.text === 'Pink' ||
                    args.item.text === 'Violet' ||
                    args.item.text === 'Orange' ||
                    args.item.text === 'Brown'
                ) {
                    selectedNode.annotations[0].style.fill = args.item.text;
                    diagramInstance.dataBind();
                } else {
                    diagramInstance.copy();
                    diagramInstance.paste();
                }
            }
        }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Context Menu Open

In certain situations, you may want to hide specific menu items based on the selected elements in the diagram. This can be achieved using the contextMenuOpen event. When the context menu opens via right-click, this event triggers and allows you to create an array of menu items to hide for the selected element. Pass this array to thehiddenItems property of the contextMenuOpen event argument.

The following example shows how to display different custom menu items for nodes, connectors, and the diagram based on selection:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject } from "@syncfusion/ej2-react-diagrams";

let diagramInstance;

let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1',content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}],
    }
];

let connectors = [
    {
      id: 'connector1',
      sourceID: 'node1',
      targetID: 'node2',
    },
  ];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connectors}
        contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  text: 'Change fill',
                  id: 'applyFill',
                  target: '.e-diagramcontent',
                  iconCss: 'e-icons e-paint-bucket',
                },
                {
                  text: 'Change stroke',
                  id: 'applyStroke',
                  target: '.e-diagramcontent',
                  iconCss: 'e-icons e-edit',
                },
                {
                  text: 'Select All',
                  id: 'selectAll',
                  target: '.e-diagramcontent',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
        }}  

        contextMenuOpen= {(args) =>{

            let hiddenItems = [];
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            let selectedConnector = diagramInstance.selectedItems.connectors[0];
            if (selectedNode || selectedConnector) {
                hiddenItems.push('selectAll');
            } else {
                hiddenItems = ['applyFill', 'applyStroke'];
            }
            args.hiddenItems = hiddenItems;

        }}

        contextMenuClick= {(args) => {
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            let selectedConnector = diagramInstance.selectedItems.connectors[0];
            if (selectedNode || selectedConnector) {
              if (selectedNode) {
                if (args.item.id === 'applyFill') {
                  selectedNode.style.fill =
                    selectedNode.style.fill === '#6BA5D7' ? 'green' : '#6BA5D7';
                } else if (args.item.id === 'applyStroke') {
                  selectedNode.style.strokeColor =
                    selectedNode.style.strokeColor === 'black' ? 'yellow' : 'black';
                }
              }
              if (selectedConnector) {
                if (args.item.id === 'applyFill') {
                  selectedConnector.targetDecorator.style.fill =
                    selectedConnector.targetDecorator.style.fill === 'yellow'
                      ? 'black'
                      : 'yellow';
                }
                selectedConnector.style.strokeColor =
                  selectedConnector.style.strokeColor === 'black'
                    ? 'yellow'
                    : 'black';
              }
            } else {
                diagramInstance.selectAll();
            }
        }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject, NodeModel, ConnectorModel, DiagramBeforeMenuOpenEventArgs } from "@syncfusion/ej2-react-diagrams";
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

let diagramInstance: DiagramComponent;

let node: NodeModel[] = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1',content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}],
    }
];

let connectors: ConnectorModel[]= [
    {
      id: 'connector1',
      sourceID: 'node1',
      targetID: 'node2',
    },
  ];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connectors}
        contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  text: 'Change fill',
                  id: 'applyFill',
                  target: '.e-diagramcontent',
                  iconCss: 'e-icons e-paint-bucket',
                },
                {
                  text: 'Change stroke',
                  id: 'applyStroke',
                  target: '.e-diagramcontent',
                  iconCss: 'e-icons e-edit',
                },
                {
                  text: 'Select All',
                  id: 'selectAll',
                  target: '.e-diagramcontent',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
        }}  

        contextMenuOpen= {(args: DiagramBeforeMenuOpenEventArgs) =>{

            let hiddenItems = [];
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            let selectedConnector = diagramInstance.selectedItems.connectors[0];
            if (selectedNode || selectedConnector) {
                hiddenItems.push('selectAll');
            } else {
                hiddenItems = ['applyFill', 'applyStroke'];
            }
            args.hiddenItems = hiddenItems;

        }}

        contextMenuClick= {(args: MenuEventArgs) => {
            let selectedNode = diagramInstance.selectedItems.nodes[0];
            let selectedConnector = diagramInstance.selectedItems.connectors[0];
            if (selectedNode || selectedConnector) {
              if (selectedNode) {
                if (args.item.id === 'applyFill') {
                  selectedNode.style.fill =
                    selectedNode.style.fill === '#6BA5D7' ? 'green' : '#6BA5D7';
                } else if (args.item.id === 'applyStroke') {
                  selectedNode.style.strokeColor =
                    selectedNode.style.strokeColor === 'black' ? 'yellow' : 'black';
                }
              }
              if (selectedConnector) {
                if (args.item.id === 'applyFill') {
                  selectedConnector.targetDecorator.style.fill =
                    selectedConnector.targetDecorator.style.fill === 'yellow'
                      ? 'black'
                      : 'yellow';
                }
                selectedConnector.style.strokeColor =
                  selectedConnector.style.strokeColor === 'black'
                    ? 'yellow'
                    : 'black';
              }
            } else {
                diagramInstance.selectAll();
            }
        }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Context Menu with URL

Use theurl property of menu items to set website URLs that open when clicked.

The following code example shows the context menu with url for three websites.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramContextMenu, Inject } from "@syncfusion/ej2-react-diagrams";

let diagramInstance;

let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1',content: 'Rectangle1'}],
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}],
    }
];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} 
        contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  text: 'Google.com',
                  id: 'google',
                  target: '.e-diagramcontent',
                  url: 'https://www.google.co.in/',
                },
                {
                  text: 'w3schools.com',
                  id: 'W3Schools',
                  target: '.e-diagramcontent',
                  url: 'https://www.w3schools.com/',
                },
                {
                  text: 'stackoverflow.com',
                  id: 'stackoverflow',
                  target: '.e-diagramcontent',
                  url: 'https://stackoverflow.com/',
                },
              ],
            // Hides the default context menu items.
            showCustomMenuOnly: true,
        }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Template Support for Context Menu

The Diagram component provides template support for context menu customization. Customize menu item templates before rendering using the contextMenuBeforeItemRender event, which triggers while rendering each menu item.

The following example renders menu items with shortcut key codes for specific actions. Key codes for cut, copy, and paste actions display in the right corner of menu items by adding a span element in the contextMenuBeforeItemRender event:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { createElement } from '@syncfusion/ej2-base';
import { DiagramComponent, Inject, DiagramContextMenu } from "@syncfusion/ej2-react-diagrams";

let diagramInstance;

//Initializes the nodes
let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1', content: 'Rectangle1' }]
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}]
    }];
    
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} 
    contextMenuSettings={{
        //Enables the context menu
        show: true,
        items: [
            {
              text: 'Cut',
              id: 'Cut',
              target: '.e-diagramcontent',
              iconCss: 'e-cut e-icons',
            },
            {
              text: 'Copy',
              id: 'Copy',
              target: '.e-diagramcontent',
              iconCss: 'e-icons e-copy',
            },
            {
              text: 'Paste',
              id: 'Paste',
              target: '.e-diagramcontent',
              iconCss: 'e-icons e-paste',
            },
          ],
        // Hides the default context menu items
        showCustomMenuOnly: true,
    }}  
    contextMenuBeforeItemRender= {(args) =>{
        // To render template in li.
        let shortCutSpan = createElement('span');
        let text = args.item.text;
        let shortCutText =
          text === 'Cut' ? 'Ctrl + X' : text === 'Copy' ? 'Ctrl + C' : 'Ctrl + V';
        shortCutSpan.textContent = shortCutText;
        //Added CSS styles for the class shortcut to customize its position and appearance
        shortCutSpan.setAttribute('class', 'shortcut');
        args.element.appendChild(shortCutSpan);
    }}

    contextMenuClick={(args) =>{
        let selectedNode = diagramInstance.selectedItems.nodes[0];
        if (selectedNode) {
          if (args.item.text === 'Cut') {
            diagramInstance.cut();
           } else if (args.item.text === 'Copy') {
            diagramInstance.copy();
           }
        }
        if (args.item.text === 'Paste') {
            diagramInstance.paste();
        }
    }}>

    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { createElement } from '@syncfusion/ej2-base';
import { DiagramComponent, Inject, DiagramContextMenu, NodeModel } from "@syncfusion/ej2-react-diagrams";
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

let diagramInstance:DiagramComponent ;

//Initializes the nodes
let node: NodeModel[] = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{id: 'label1', content: 'Rectangle1' }]
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2',content: 'Rectangle2'}]
    }];
    
//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} 
    contextMenuSettings={{
        //Enables the context menu
        show: true,
        items: [
            {
              text: 'Cut',
              id: 'Cut',
              target: '.e-diagramcontent',
              iconCss: 'e-cut e-icons',
            },
            {
              text: 'Copy',
              id: 'Copy',
              target: '.e-diagramcontent',
              iconCss: 'e-icons e-copy',
            },
            {
              text: 'Paste',
              id: 'Paste',
              target: '.e-diagramcontent',
              iconCss: 'e-icons e-paste',
            },
          ],
        // Hides the default context menu items
        showCustomMenuOnly: true,
    }}  
    contextMenuBeforeItemRender= {(args: MenuEventArgs) =>{
        // To render template in li.
        let shortCutSpan = createElement('span');
        let text = args.item.text;
        let shortCutText =
          text === 'Cut' ? 'Ctrl + X' : text === 'Copy' ? 'Ctrl + C' : 'Ctrl + V';
        shortCutSpan.textContent = shortCutText;
        //Added CSS styles for the class shortcut to customize its position and appearance
        shortCutSpan.setAttribute('class', 'shortcut');
        args.element.appendChild(shortCutSpan);
    }}

    contextMenuClick={(args: MenuEventArgs) =>{
        let selectedNode = diagramInstance.selectedItems.nodes[0];
        if (selectedNode) {
          if (args.item.text === 'Cut') {
            diagramInstance.cut();
           } else if (args.item.text === 'Copy') {
            diagramInstance.copy();
           }
        }
        if (args.item.text === 'Paste') {
            diagramInstance.paste();
        }
    }}>

    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Context Menu Events

Event	Description
contextMenuBeforeItemRender	Triggers while initializing each menu item.
contextMenuOpen	Triggers upon right-click before opening the context menu.
contextMenuClick	Triggers when a menu item is clicked.

The following example shows how to get these events.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DiagramContextMenu } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;

let connector = [{
        id: 'connector1',
        sourceID: 'node1',
        targetID: 'node2',
  
}];

let node = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{ id: 'label1', content: 'Rectangle1' }]
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2', content: 'Rectangle2'}]
}];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  text: 'menu item 1',
                  id: 'item1',
                },
                {
                  text: 'menu item 2',
                  id: 'item2',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
    }} 
    contextMenuBeforeItemRender={(args) => {
        //Triggers when the menu is openned
        console.log('context menu before item render');
    }}
    contextMenuOpen={(args) => {
        //Triggers when the menu is openned
        console.log('context menu openned');
    }}
    contextMenuClick={(args) => {
       //Triggers when the item is clicked
       console.log('context menu clicked');
 
    }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DiagramContextMenu, NodeModel, ConnectorModel, DiagramBeforeMenuOpenEventArgs} from "@syncfusion/ej2-react-diagrams";
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

let diagramInstance: DiagramComponent;

let connector: ConnectorModel[] = [{
        id: 'connector1',
        sourceID: 'node1',
        targetID: 'node2',
  
}];

let node: NodeModel[] = [{
        id: 'node1',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        annotations: [{ id: 'label1', content: 'Rectangle1' }]
    }, {
        id: 'node2',
        width: 100,
        height: 100,
        offsetX: 300,
        offsetY: 100,
        annotations: [{id: 'label2', content: 'Rectangle2'}]
}];

//Initializes the Diagram component
function App() {
    return (<DiagramComponent id="diagram_contextmenu" ref={(diagram) => (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
            //Enables the context menu
            show: true,
            items: [
                {
                  text: 'menu item 1',
                  id: 'item1',
                },
                {
                  text: 'menu item 2',
                  id: 'item2',
                },
              ],
            // Hides the default context menu items
            showCustomMenuOnly: true,
    }} 
    contextMenuBeforeItemRender={(args: MenuEventArgs) => {
        //Triggers when the menu is openned
        console.log('context menu before item render');
    }}
    contextMenuOpen={(args: DiagramBeforeMenuOpenEventArgs) => {
        //Triggers when the menu is openned
        console.log('context menu openned');
    }}
    contextMenuClick={(args: MenuEventArgs) => {
       //Triggers when the item is clicked
       console.log('context menu clicked');
 
    }}>
    <Inject services={[DiagramContextMenu]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

## See Also

• How to open context menu on left click