React ContextMenu

A React component for creating menus with ease.

Installation

npm i @porrametict/react-context-menu

Usage

import { ContextMenu, CallbackProps } from "@porrametict/react-context-menu";

export const Example1 = () => {
  const menuItems = [
    { id: "menu1", label: "Menu 1" },
    {
      id: "menu2",
      label: "Menu 2",

      submenu: [
        {
          id: "submenu-2-1",
          parentId: "menu2",
          label: "Submenu 2-1",
        },
        {
          id: "submenu-2-2",
          parentId: "menu2",
          label: "Submenu 2-2",
        },
      ],
    },
  ];

  const handleOnClick = ({ data, menuItem }: CallbackProps) => {
    console.log(data);
    console.log(menuItem);
    alert(`Data is: ${data} \nMenuItem is: ${JSON.stringify(menuItem)}`);
  };
  return (
    <ContextMenu
      menuItems={menuItems}
      onMenuClick={(_data) => handleOnClick(_data)}
    >
      <div
        style={{
          height: "100px",
          width: "100px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          border: "1px solid black",
        }}
      >
        Right Click Me
      </div>
    </ContextMenu>
  );
};

Props

• menuItems (required): An array of menu items that define the structure and behavior of the context menu.
• onMenuClick (required): A callback function that is called when a menu item is clicked. It receives two parameters: data (the associated data) and menuItem (the clicked menu item). Use this callback to handle different actions based on the clicked menu item.
• data (optional): The data associated with the context menu. This is passed to the onMenuClick callback when a menu item is clicked.
• menuItemWidth (optional): The width of each menu item in pixels. (Default: 200)
• menuItemHeight (optional): The height of each menu item in pixels. (Default: 30)
• containerStyle (optional): Custom styling for the container that wraps the context menu.
• menuContainerClass (optional): Additional CSS class for the menu container.
• menuItemClass (optional): Additional CSS class for each menu item.

MenuItem

• id (required): A unique identifier for the menu item.
• parentId (required): The identifier of the parent menu item. Not set or use null for top-level items.
• label (required): The text label displayed for the menu item.
• submenu (optional): An array of submenu items, defining nested menus.
• prependIcon (optional): React node to prepend an icon to the menu item.
• appendIcon (optional): React node to append an icon to the menu item.
• disabledFunc (optional): A function that, when provided with CallbackProps, returns a boolean indicating whether the menu item should be disabled.
• hiddenFunc (optional): A function that, when provided with CallbackProps, returns a boolean indicating whether the menu item should be hidden.
• ... (additional properties): Any additional properties can be added as needed.

[
  { id: "menu1", label: "Menu 1" },
  {
    id: "menu2",
    label: "Menu 2",

    submenu: [
      {
        id: "submenu-2-1",
        parentId: "menu2",
        label: "Submenu 2-1",
      },
      {
        id: "submenu-2-2",
        parentId: "menu2",
        label: "Submenu 2-2",
      },
    ],
  },
  {
    id: "disable-menu",
    parentId: null,
    label: "Disabled menu",
    action: "delete",
    disabledFunc: (_data) => {
      const { data, menuItem } = _data;
      return true;
    },
  },
  {
    id: "hide-menu",
    parentId: null,
    label: "Hide Me",
    action: "delete",
    hiddenFunc: (_data) => {
      const { data, menuItem } = _data;
      return true;
    },
  },
];