Pikas UI

@pikas-ui/context-menu

This package contains a context menu component that can be used to show a menu when the user right clicks on an element.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/context-menu

yarn add @pikas-ui/context-menu

pnpm add @pikas-ui/context-menu

Usage

ContextMenu

The ContextMenu component is used to show a menu when the user right clicks on an element.

Right click here

import { ContextMenu } from '@pikas-ui/context-menu';

const Example: React.FC = () => {
  return (
    <ContextMenu
      data={[
        {
          label: 'Item 1',
          items: [
            {
              label: 'Item 1-1',
              type: 'item',
              onClick: console.log,
            },
            {
              type: 'checkbox',
              checked: true,
              label: 'Item 1-2',
              onCheckedChange: console.log,
              colorName: 'primary',
            },
            {
              type: 'radio',
              onValueChange: console.log,
              value: '1',
              radios: [
                {
                  label: 'Item 1-3-1',
                  value: '1',
                },
                {
                  label: 'Item 1-3-2',
                  value: '2',
                },
              ],
            },
            {
              type: 'menu',
              label: 'Item 1-4',
              data: [
                {
                  label: 'Item 1-4-1',
                  items: [
                    {
                      label: 'Item 1-4-1-1',
                      type: 'item',
                      onClick: console.log,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]}
    >
      <div>Right click here</div>
    </ContextMenu>
  );
};

Props

Prop	Description	Type	Default
`data`	Menu data	`MenuData`	-
`children`	Trigger element	`ReactNode`	-
`css`	CSS of context menu	`ContextMenuCSS`	-
`onOpenChange`	Event handler called when the open state of the context menu changes.	`(open: boolean) => void`	-
`modal`	The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. This prop is ignored within submenus.	`boolean`	`true`
`loop`	When true, keyboard navigation will loop from last item to first, and vice versa.	`boolean`	`false`
`direction`	The direction of the menu	`ContextMenuDirection`	-
`onCloseAutoFocus`	Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault. This prop is ignored within submenus.	`(event: Event) => void`	-
`onEscapeKeyDown`	Event handler called when the escape key is down. It can be prevented by calling event.	`(event: KeyboardEvent) => void`	-
`onPointerDownOutside`	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`onFocusOutside`	Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`onInteractOutside`	Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`alignOffset`	The vertical distance in pixels from the anchor.	`number`	-
`avoidCollisions`	When true, overrides the side andalign preferences to prevent collisions with window edges.	`boolean`	`true`
`collisionPadding`	The distance in pixels from window edges where collision detection should occur.	`number`	-
`disabled`	When true, the context menu will be disabled.	`boolean`	`false`

Contributing

This documentation can be edited on GitHub here