ContextMenu

caution

All props/parameters are optional unless they are marked with an asterisk ( * ).

caution

This component requires the use of the common module contextMenu.

Example

import { common, components } from "replugged";
const { contextMenu } = common;
const { Button, ContextMenu: Menu } = components;

const ExampleContext = (): React.ReactElement => (
  <Menu.ContextMenu navId="example-context" onClose={contextMenu.close}>
    <Menu.MenuGroup>{/* Your Menu components here */}</Menu.MenuGroup>
    <Menu.MenuItem id="example-item" label="Menu Item" action={() => console.log("Pressed!")} />
    <Menu.MenuItem id="example-submenu" label="Menu Item">
      {/* Add Menu components here to create a submenu */}
    </Menu.MenuItem>
    <Menu.MenuSeparator />
  </Menu.ContextMenu>
);

<Button onContextMenu={(event) => contextMenu.open(event, () => <ExampleContext />)}>
  Right-click me
</Button>;

Subcomponents

Component	Description
ContextMenu.ContextMenu	Menu root component
ContextMenu.MenuCheckboxItem	Checkbox item
ContextMenu.MenuControlItem	Component used to create custom items
ContextMenu.MenuGroup	Group other components
ContextMenu.MenuItem	Normal item or it can also contain other components to create a submenu
ContextMenu.MenuRadioItem	Radio item
ContextMenu.MenuSeparator	Item divider

Enums

Enum	Description
ContextMenu.ItemColors	Context menu colors DEFAULT | BRAND | DANGER | PREMIUM | PREMIUM_GRADIENT | SUCCESS

Types

ContextMenu.ContextMenu

Props:

Name	Type	Default	Description
className	string		Component class name
hideScroller	boolean		Whether the scroller is hidden
navId	* string		Context menu id
onClose	* () => void		Function ran when the context menu got closed; check out contextMenu.close
onSelect	() => void		Function ran when clicking an item
style	CSSProperties		Component style
variant	string	flexible	Whether the context menu width is flexible or fixed

ContextMenu.MenuCheckboxItem

Props:

Name	Type	Default	Description
action	MouseEventHandler<HTMLDivElement>		Function ran when clicking the item
checked	boolean	false	Checkbox state
className	string		Component class name
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
disabled	boolean	false	Whether the checkbox is disabled
focusedClassName	string		Focused element class name
id	* string		Item id
label	string		Item label
subtext	string		Additional text under the label

ContextMenu.MenuControlItem

Props:

info

This component has more possible props:

• If a children is added, this item will use the MenuCompositeControlItem props.

Name	Type	Default	Description
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
control	* (data: { onClose: () => void; disabled: boolean; isFocused: boolean }, ref?: Ref<{ activate: () => boolean; blur: () => void; focus: () => void }>) => ReactElement		Control item render function
disabled	boolean	false	Whether the item is disabled
id	* string		Item id
label	string		Item label
showDefaultFocus	boolean	false	Whether the item is focusable

ContextMenu.MenuGroup

Props:

Name	Type	Default	Description
className	string		Component class name
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
label	string		Item label

ContextMenu.MenuItem

Props:

info

This component has more possible props:

• With a render function added, this item will use the MenuCustomItem props.
• If a children is added, this item will use the MenuSubmenuItem props.
• If childRowHeight prop with children is added, this item will use the MenuSubmenuListItem props.

Name	Type	Default	Description
action	MouseEventHandler<HTMLDivElement>		Function ran when clicking the item
className	string		Component class name
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
disabled	boolean	false	Whether the item is disabled
dontCloseOnActionIfHoldingShiftKey	boolean	false	Whether not to close the context menu while holding down the shift key and clicking the item
focusedClassName	string		Focused element class name
hint	ReactNode		Item hint
icon	ComponentType<unknown>		Item icon
iconProps	Record<string, unknown>		Props for the icon component
id	* string		Item id
imageUrl	string		Source URL of the image
label	string		Item label
onFocus	() => void		Function ran when the item gets focused
showIconFirst	boolean	false	Whether the icon is shown before the label
sparkle	boolean	false	Whether the submenu icon shows a sparkle effect
subMenuIconClassName	string		Submenu icon element class name
subtext	ReactNode		Additional text under the label

ContextMenu.MenuRadioItem

Props:

Name	Type	Default	Description
action	MouseEventHandler<HTMLDivElement>		Function ran when clicking the item
checked	boolean	false	Radio state
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
disabled	boolean	false	Whether the radio is disabled
id	* string		Item id
label	string		Item label
subtext	string		Additional text under the label

MenuCompositeControlItem

Props:

Name	Type	Default	Description
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
disabled	boolean	false	Whether the item is disabled
id	* string		Item id
interactive	boolean	false	Whether the item is navigable
showDefaultFocus	boolean	false	Whether the item is focusable

MenuCustomItem

Props:

Name	Type	Default	Description
action	MouseEventHandler<HTMLDivElement>		Function ran when clicking the item
color	ContextMenu.ItemColors	ContextMenu.ItemColors.DEFAULT	Item color
disabled	boolean	false	Whether the item is disabled
dontCloseOnActionIfHoldingShiftKey	boolean	false	Whether not to close the context menu while holding down the shift key and clicking the item
id	* string		Item id
keepItemStyles	boolean	false	Whether use the normal menu item classes
navigable	boolean	true	Whether the item is navigable
render	* (data: { color: ContextMenu.ItemColors; disabled: boolean; isFocused: boolean }) => ReactNode		Custom item render function

MenuSubmenuItem

Props:

info

The props of this component extend the props of the ContextMenu.MenuItem component.

Name	Type	Default	Description
subMenuClassName	string		Submenu element class name

MenuSubmenuListItem

Props:

info

The props of this component extend the props of the ContextMenu.MenuItem component.

Name	Type	Default	Description
onChildrenScroll	() => void		Each child's height
childRowHeight	* number		Each child's height
listClassName	string		List element class name