A simple context menu to provide actions via right click on any component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

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.