Skip to main content

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.
important

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.