//renderer.js, importing remote module
const remote = require('electron').remote;
The remote module provides access to modules normally available only to the main process. By importing this module in our renderer.js file, we can in turn access the following main process’s modules within our Render process:
app autoUpdater BrowserWindow contentTracing dialog globalShortcut ipcMain Menu MenuItem powerMonitor powerSaveBlocker protocol session webContents tray
How to use BrowserWindow module in renderer process
Here is a simple BrowserWindow example:
//renderer.js
const { remote } = require('electron'),
window = remote.getCurrentWindow();
The remote.getCurrentWindow() returns a reference to the BrowserWindow instance to which this web page belongs (index.html).
How to close the current window from the renderer process using remote module
Now that we have a reference to the index.html window, we can resize, close or minimize it using methods provided in https://electronjs.org/docs/api/browser-window. For example to close the current window:
//renderer.js
/*Close the current window*/
const { remote } = require('electron'),
currWindow = remote.getCurrentWindow(),
appCloseBtn = document.querySelector('#close');
appCloseBtn.addEventListener('click', e =>{
currWindow.close();
});
How to use dialog module in renderer process
The dialog module is restricted to the main process, meaning to interact with it we will either need to call its methods from a menu event, via the inter-process communication IPC modules (https://electronjs.org/docs/api/ipc-main and https://electronjs.org/docs/api/ipc-renderer) from the renderer process, or by using the remote module.
Display confirmation dialog box using remote module
The following example demonstrates how to display a confirmation box before closing the current window:
//renderer.js
/*Close the current window*/
const { remote } = require('electron'),
currWindow = remote.getCurrentWindow(),
appCloseBtn = document.querySelector('#close'),
dialog = remote.dialog;
appCloseBtn.addEventListener('click', e =>{
const options = {
type: 'warning',
buttons: ['Yes', 'No'],
message: 'Do you really want to quit?'
}
dialog.showMessageBox(options, i => {
if (i == 1) return;
window.close();
})
});
How to display context menu with the help of remote module
Here is a simple contextual menu:
//renderer.js
const { remote } = require('electron');
const myContextMenu = remote.Menu.buildFromTemplate ([
{ label: 'Exit', role: 'quit' },
{ label: 'Minimize', role: 'minimize' },
{ type: 'separator' },
{ label: 'Start', click() { console.log('Start the app') } }
])
window.addEventListener('contextmenu', (event) => {
event.preventDefault();
myContextMenu.popup();
})
Visit Electron’s documentation for more information:
