Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kilian/electron-create-menu
a default menu for your electron applications, with convenience functions for multiplatform use and i18n.
https://github.com/kilian/electron-create-menu
cross-platform electron i18n javascript menu node
Last synced: about 2 months ago
JSON representation
a default menu for your electron applications, with convenience functions for multiplatform use and i18n.
- Host: GitHub
- URL: https://github.com/kilian/electron-create-menu
- Owner: Kilian
- License: isc
- Created: 2019-01-07T15:15:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-20T15:48:38.000Z (almost 5 years ago)
- Last Synced: 2024-07-17T11:57:15.098Z (2 months ago)
- Topics: cross-platform, electron, i18n, javascript, menu, node
- Language: JavaScript
- Homepage:
- Size: 237 KB
- Stars: 34
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
- awesome-electron - electron-create-menu - Default menus for all platforms, easily extendable, and with i18n support.  (Library / UI)
README
### Made by [@kilianvalkhof](https://twitter.com/kilianvalkhof)
#### Other projects:
- 💻 [Polypane](https://polypane.app) - Develop responsive websites and apps twice as fast on multiple screens at once
- 🖌️ [Superposition](https://superposition.design) - Kickstart your design system by extracting design tokens from your website
- 🗒️ [FromScratch](https://fromscratch.rocks) - A smart but simple autosaving scratchpad
---
# Electron-create-menu [](https://www.npmjs.com/package/electron-create-menu) [](https://www.npmjs.com/package/electron-create-menu) [](https://app.fossa.io/projects/git%2Bgithub.com%2FKilian%2Felectron-create-menu?ref=badge_shield)
provides a default menu for your electron applications, with convenience functions for multiplatform use and i18n.
## Installation
Install using `npm install electron-create-menu`.
## Usage
Instead of importing Menu from `electron`, import it from `electron-create-menu`:
```js
import Menu from "electron-create-menu";
// or
const Menu = require("electron-create-menu");
```
To get a default menu with platform-appropriate menu items and submenus, call Menu like so:
```
Menu();
```
_Note:_ This API has to be called after the `ready` event of `app` module.
Menu always returns the menu object that `Menu.buildFromTemplate` creates, so you can access [instance methods](https://electronjs.org/docs/api/menu#instance-methods) on it.
### Optional arguments
Menu has two optional functions you can pass it
- The first argument is the `callback` function, where you can further edit (or replace) the generated menu.
- The second argument is the `i18n` function where you can supply a function to use for translating the menu items.
```js
Menu(callback, i18n);
```
### The callback function
`callback` receives two arguments:
- The generated menu
- A function that returns `{type: 'separator'}` for convenience.
It expects you to return a menu-like object, either the edited default menu or a new menu.
#### Callback example
To append a menu item to the menu, push an object onto menu and return it:
```js
Menu((defaultMenu, separator) => {
defaultMenu.push({
label: "My custom menu!",
submenu: [
{ label: "my first item" },
separator(),
{ label: "my second item" }
]
});
return defaultMenu;
});
```
### The i18n function
The i18n function is applied to the labels of the default menu. There are two things worth mentioning:
- Most items in the default menu are specified by a _role_, so the OS will supply the translation.
- Labels added in the callback function are not translated by this function.
#### Example using i18next
```js
const i18next = require('i18next');
i18next.init({
/* assumed setup of i18next here */
}).then(function(t) {
Menu(
menu => {
menu.push({
label: i18next.t('My custom menu!'),
submenu: [
{label: i18next.t('my first item')},
{label: i18next.t('my second item')},
],
}),
return menu;
},
// This function is used to translate the default labels
i18next.t
);
});
```
## Multiplatform use
Each item in your menu can have two new properties, `showOn` and `hideOn`. These accept a string or an array of strings that correspond to `process.platform` values such as 'darwin' or 'win32'.
```js
// this shows the menu item only on macOs
{
showOn: "darwin";
}
// this hides the menu item on windows and macOs
{
hideOn: ["win32", "darwin"];
}
```
With these, you can adapt your menu to multiple platforms without having to maintain multiple menu templates. See the [default template](https://github.com/Kilian/electron-create-menu/blob/master/index.js#L7) for an example of a consolidated template.
You can also add a string or an array of strings as an argument to the separator function: `separator('darwin')`. The given value is interpreted as the value for `showOn`.
#### Example
```js
Menu((defaultMenu, separator) => {
defaultMenu.push({
label: "My custom menu!",
submenu: [
{
label: 'This is only shown on macOs',
showOn: 'darwin',
},
separator('darwin'), // this is shown only macOs
{label:
'This is hidden on windows'
hideOn: ['win32']
},
],
});
return defaultMenu;
});
```
## License
Electron-create-menu is ISC licensed.
[](https://app.fossa.io/projects/git%2Bgithub.com%2FKilian%2Felectron-create-menu?ref=badge_large)