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