npm package: @porrametict/react-context-menu
Description: A React component for creating menus with ease.
Latest version: 1.0.9

# React ContextMenu

A React component for creating menus with ease.

## Installation

```bash
npm i @porrametict/react-context-menu
```

## Usage

```jsx
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.

```jsx
[
  { 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;
    },
  },
];
```