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