Package Exports
- @langleyfoxall/react-dynamic-context-menu
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@langleyfoxall/react-dynamic-context-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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. |