/context-menu

A small JavaScript library for adding context menus to any HTML element

Primary LanguageJavaScriptMIT LicenseMIT

context-menu

A small (4.4kb / 1.7kb gzipped) JavaScript library for adding context menus to any HTML element.

npm install @mturco/context-menu

See demo

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 the items 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', () => { /* ... */ });