Playground

See the live demo on playground ↗

Installation - Quick Start

To add React Quick Menu to your project, follow these steps:

Installation via NPM

React Quick Menu can be easily integrated into your project via NPM (Node Package Manager). Open your terminal or command prompt in the root directory of your project and run the following command:

npm install react-quickmenu --save

The above command will download the React Quick Menu package to your project and add it to your dependencies.

Usage

After adding the package to your project, you can start using React Quick Menu. First, you'll need to integrate the Context Menu provider into your project. To do this, add the ContextMenuProvider component to a top-level component in your project.

import { ContextMenuProvider } from "react-quickmenu";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ContextMenuProvider theme={"dark"}>
    <App />
  </ContextMenuProvider>
);

Next, you can define the context menu using the ContextMenuWrapper component within any component where you want to use the context menu.

import { ContextMenuWrapper, ContextMenu, ContextMenuItem } from 'react-quickmenu';

const MyComponent = () => {
  const contextMenu = (
    <ContextMenu id={0}>
        <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
        <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />
    </ContextMenu>
  );

  return (
    <ContextMenuWrapper contextMenu={contextMenu}>
      <div>
        {/* Content */}
      </div>
    </ContextMenuWrapper>
  );
};

API Reference

This section provides detailed information about the components and props available in the React Quick Menu package.

ContextMenuProvider

The ContextMenuProvider component is used to provide context menu functionality to the entire application. It should be rendered at the root of your application.

Props

• theme (optional): Specifies the theme to be applied to the context menu. (Default: light)

ContextMenuWrapper

The ContextMenuWrapper component is used to wrap any component where you want to display a context menu. It defines the area where the context menu will appear when triggered.

Props

• contextMenu: The context menu content to be displayed.
• children: The child components within the wrapper where the context menu can be triggered.

ContextMenu

The ContextMenu component defines a context menu group. It can contain ContextMenuItem and ExpandingContextMenuItem components.

Props

• id: A unique identifier for the context menu group.

NOTE

The first ContextMenu component must have id set to 0. Subsequent ContextMenu components added after it should have IDs incremented by 1, such as 1, 2, 3, and so on.

Do this ✅

    <ContextMenu id={0}>
        <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
        <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />

        <ExpandingContextMenuItem text="MenuItem 3">
            <ContextMenu id={1}>
                <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
                <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />
            </ContextMenu>
        </ExpandingContextMenuItem>
    </ContextMenu>

Avoid doing this ❌

    <ContextMenu id={1}>
        <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
        <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />

        <ExpandingContextMenuItem text="MenuItem 3">
            <ContextMenu id={3}>
                <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
                <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />
            </ContextMenu>
        </ExpandingContextMenuItem>
    </ContextMenu>

ContextMenuItem

The ContextMenuItem component represents a single item in the context menu.

Props

• text: The text to be displayed for the menu item.
• onClick: The function to be called when the menu item is clicked.
• disabled (optional): Specifies whether the menu item is disabled.

ExpandingContextMenuItem

The ExpandingContextMenuItem component represents a menu item that can expand to show additional items when clicked. This component can be nested to create a multi-level menu and must have a ContextMenu component as a child.

Props

• text: The text to be displayed for the menu item.
• disabled (optional): Specifies whether the menu item is disabled.