https://github.com/parro-it/electron-contextmenu-middleware
Build electron context menus composing multiple middlewares functions.
https://github.com/parro-it/electron-contextmenu-middleware
Last synced: 5 months ago
JSON representation
Build electron context menus composing multiple middlewares functions.
- Host: GitHub
- URL: https://github.com/parro-it/electron-contextmenu-middleware
- Owner: parro-it
- License: mit
- Created: 2016-03-08T19:41:52.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-06-03T09:20:52.000Z (over 5 years ago)
- Last Synced: 2024-08-09T08:09:05.389Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 87.9 KB
- Stars: 49
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# electron-contextmenu-middleware
[](https://greenkeeper.io/)
> Build `electron` context menus composing multiple middlewares functions.
[](http://travis-ci.org/parro-it/electron-contextmenu-middleware)
[](https://npmjs.org/package/electron-contextmenu-middleware)
[](https://npmjs.org/package/electron-contextmenu-middleware)
This package born because I've published two other
npm packages for electron that provide different context menu for DOM element.
`electron-input-menu` provide Copy&Paste stuff for `input` element, while `debug-menu` provide a Chrome-like "inspect element" menu for `electron`.
They both work well on their own, but if you want to use them together you can only shown one menu or the other, because they `preventDefault` the contextmenu event. If you remove the `preventDefault` call, then you get both, in sequence.
`electron-contextmenu-middleware` grab menus provided by various other packages (the `middlewares` ones) merge them in a single menu, and `popup` it.
# Installation
```bash
npm install --save electron-contextmenu-middleware
```
# Usage
```js
// in a renderer electron process,
// you want to activate context menu provided
// by `electron-input-menu` and `debug-menu`
const context = require('electron-contextmenu-middleware');
const input = require('electron-input-menu');
const debug = require('debug-menu').middleware;
context.use(input);
context.use(debug);
context.activate();
```
# Write a middleware
To write a `middleware` menu, just export a function
that receives an option object and a next function.
The option object is composed by the right-clicked DOM element, the click x and y coord, and an array of `electron` menu item templates.
Append or insert your menu items to the array in the position you want (or remove existing items inserted by other middlewares) and call `next` when done.
```js
export default function ({elm, menu, click}, next) {
menu.push({
label: 'Inspect element',
click: () => {
require('electron').remote
.getCurrentWindow()
.inspectElement(
click.x,
click.y
);
}
});
}
```
# Related projects
* [electron-input-menu](https://github.com/parro-it/electron-input-menu) - Context menu for [electron](https://github.com/atom/electron) input elements.
* [debug-menu](https://github.com/parro-it/debug-menu) - Chrome-like "inspect element" context-menu.
# License
The MIT License (MIT)
Copyright (c) 2016 parro-it