Context Menu

reagraph supports context menus on nodes and edges. Out of the box, reagraph supports:

Radial Menu
Custom Menu

The setup the RadialMenu component, we need to setup the theme first. The radial menu uses CSS variables to define colors. Here is an example of how to define those colors:


body {
  --radial-menu-background: #fff;
  --radial-menu-color: #000;
  --radial-menu-border: #AACBD2;
  --radial-menu-active-color: #000;
  --radial-menu-active-background: #D8E6EA;
}

Once those are defined, we can use the contextMenu callback prop to return a radial menu component. The callback provides the model (node/edge), contextual information around a node’s collapse state, and a callback to close the menu.


import { GraphCanvas, RadialMenu } from 'reagraph';
 
export const MyApp = () => (
  <GraphCanvas
    nodes={nodes}
    edges={edges}
    contextMenu={({ data, additional, onClose }) => (
      <RadialMenu
        onClose={onClose}
        items={[
          {
            label: 'Add Node',
            onClick: () => {
              alert('Add a node');
              onClose();
            }
          },
          {
            label: 'Remove Node',
            onClick: () => {
              alert('Remove the node');
              onClose();
            }
          }
        ]}
      />
    )}
  />
);

The contextMenu callback prop can be used to return a custom menu. Below is an example of how to setup a simple menu that displays the label of the node.


import { GraphCanvas } from 'reagraph';
 
export const Node = () => (
  <GraphCanvas
    nodes={nodes}
    edges={edges}
    contextMenu={({ data, additional, onClose }) => (
      <div
        style={{
          background: 'white',
          width: 150,
          border: 'solid 1px blue',
          borderRadius: 2,
          padding: 5,
          textAlign: 'center'
        }}
      >
        <h1>{data.label}</h1>
        <button onClick={onClose}>Close Menu</button>
      </div>
    )}
  />
);

Context Menu

Radial Menu

Custom Menu