Customizable Context Menu & Dropdown Component For React

Description:

A fully configurable context menu (right-click menu) and dropdown (left-click menu) component for React.

How to use it:

1. Installation.

# NPM
$ npm i use-context-menu

2. Create a right-click menu.

export function Demo({ className }: { className: string }) {
  const { contextMenu, onContextMenu } = useContextMenu(
    <>
      <ContextMenuCategory>Section one</ContextMenuCategory>
      <ContextMenuItem>One</ContextMenuItem>
      <ContextMenuItem>Two</ContextMenuItem>
      <ContextMenuDivider />
      <ContextMenuCategory>Section two</ContextMenuCategory>
      <ContextMenuItem>Three</ContextMenuItem>
    </>
  );
  return (
    <>
      <span className={className} onContextMenu={onContextMenu}>
        right-click me
      </span>
      {contextMenu}
    </>
  );
}

3. Create a left-click dropdown menu.

export function Demo({ className }: { className: string }) {
  const { contextMenu: menu, onContextMenu: onClick } = useContextMenu(
    <>
      <ContextMenuCategory>Section one</ContextMenuCategory>
      <ContextMenuItem>One</ContextMenuItem>
      <ContextMenuItem>Two</ContextMenuItem>
      <ContextMenuDivider />
      <ContextMenuCategory>Section two</ContextMenuCategory>
      <ContextMenuItem>Three</ContextMenuItem>
    </>
  );
  return (
    <>
      <span className={className} onClick={onClick}>
        click me <Icon type="down-arrow" />
      </span>
      {menu}
    </>
  );
}

Preview: