React Dynamic Context menu provides an easy way to add right click functionality to React components.
| 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. |
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>Whatever is passed into as the data prop will be used as the first argument when the onClick function is called.
[
{
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. |