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