npm

@langleyfoxall/react-dynamic-context-menu

1.2.0 • Public • Published

React Dynamic Context Menu

React Dynamic Context menu provides an easy way to add right click functionality to React components.

Props

Name Type Usage
menuItems Array of Objects The items that appear on the menu when the context menu is shown
data Object The data passed in as the first argument to the onClick function.
ignoreClickEvents (optional) Single or Array of refs Refs of elements that won't close the menu when clicked.

Basic usage

To use the DynamicContextMenu wrap the element you want to be clickable.

const menu = [
	{
		label: 'Save'
		onClick: this.handleSave
	},
	{
		label: 'Delete'
		onClick: this.handleDelete
		className: 'danger'
	}
]

...

<DynamicContextMenu
	menuItems={menu}
	data={rowData}
>
	<p>Right click this row!</p>
</DynamicContextMenu>

Data

Whatever is passed into as the data prop will be used as the first argument when the onClick function is called.

Menu Items

[
	{
		label: 'Save'
		onClick: this.handleSave
	},
	{
		label: 'Delete'
		onClick: this.handleDelete
		className: 'danger'
	}
]

As you can see menu items can have 3 properties. They are:

Name Description
Label The text are appears on the menu item
onClick The callback that is called when the menu item is clicked. The first argument of the method is the data passed in to the data on the DynamicContextMenu.
className (optional) The class name of the menu item div.
onContextMenu (optional) A valid function ran after the menu has opened.

Package Sidebar

Install

npm i @langleyfoxall/react-dynamic-context-menu

Weekly Downloads

0

Version

1.2.0

License

LGPL-3.0

Unpacked Size

23.8 kB

Total Files

8

Last publish

Collaborators

  • alexcatch
  • dextermb
  • divineomega
  • nilesb
  • wheatleyjj