context-menu
A small (4.4kb / 1.7kb gzipped) JavaScript library for adding context menus to any HTML element.
npm install @mturco/context-menu
API
Constructor
new ContextMenu(selector, items[, options]);
-
selector
(String) - Show context menus for elements matching this selector -
items
(Array) - Array of menu items objects in the format of:-
name
(String) - Label displayed for menu item -
fn
(Function) -onclick
event handler for menu item - Note: to insert a divider, insert an empty object (
{}
) in theitems
array.
-
-
options
(Object)-
className
(String, default:''
) - CSS class to add to the context menu element -
minimalStyling
(Boolean, default:false
) - If true, does not apply default theme CSS class to context menu element
-
.on() / .off()
ContextMenu.prototype.on(type, listener);
ContextMenu.prototype.off(type, listener);
-
type
(String) - Event type; one of:created
,shown
,hidden
,itemselected
-
listener
(Function) - Callback for event listener
.destroy()
Removes DOM elements and event listeners.
Example
import ContextMenu from 'context-menu';
const menu = new ContextMenu('table tr', [
{
name: 'Add row',
fn: () => {
/* ... */
},
},
{
name: 'Remove row',
fn: () => {
/* ... */
},
},
]);
menu.on('itemselected', () => {
/* ... */
});