Easily create modals using child browser windows
Let's face it, using HTML5 modals on Electron applications doesn't provide a
native experience, and electron-modal wants to fix that, by allowing you to
easily create and manage application modals built using child browser windows.
// Main process
const { app } = require('electron');
const modal = require('electron-modal');
app.on('ready', () => {
// Run this on the ready event to setup everything
// needed on the main process.
modal.setup();
// Create browser windows, etc...
});// Renderer process
const modal = require('electron-modal');
const path = require('path');
modal.open(path.join(__dirname, 'modal.html'), {
// Any BrowserWindow options
width: 400,
height: 300
}, {
// Any data you want to pass to the modal
title: 'electron-modal example'
}).then((instance) => {
instance.on('increment', () => {
console.log('Increment event received!');
});
instance.on('decrement', () => {
console.log('Decrement event received!');
});
});// Modal process
const modal = require('electron-modal');
document.getElementById('#increment').addEventListener('click', () => {
modal.emit('increment').then(() => {
console.log('The increment event was sent');
});
});
document.getElementById('#decrement').addEventListener('click', () => {
modal.emit('decrement').then(() => {
console.log('The decrement event was sent');
});
});
modal.getData().then((data) => {
// Apply the data you passed to the modal
document.querySelector('h1').innerHTML = data.title;
// And once we're ready, let's show it!
modal.show();
});Install electron-modal by running:
$ npm install --save electron-modalYou use the same module in the main and renderer process, which will automatically expose a different API depending on where it was loaded from.
Run this function after the ready event has been emitted in order to
setup all the IPC event listeners this module needs on the main process in
order to work correctly.
Open a modal.
html: path to an HTML fileoptions: anyBrowserWindowconstructor optionsdata: any data you want to pass to the modal
This function resolves a modal instance object.
.show(): same asBrowserWindow#show().hide(): same asBrowserWindow#hide().isVisible(): same asBrowserWindow#isVisible()
closed: when the modal is closedshow: when the modal is shownhide: when the modal is hidden
The instance may also emit any user event sent with modal.emit(), from the
modal process.
Show the current modal window. Modal windows are not displayed by default by this module. The intention is that you process the passed data, and once you're ready, you call this function.
Hide the current modal window.
Check if the current modal window is visible.
Get the data object passed to the modal by modal.open().
// Renderer process
modal.open(path.join(__dirname, 'modal.html'), {
width: 400,
height: 300
}, {
number: 1,
string: 'foo'
});// Modal process
modal.getData().then((data) => {
console.log(data.number);
console.log(data.string);
});Emit a custom event that the renderer process can listen to on the resolved instance.
channel: the name of the eventmessage: the event data
// Renderer process
modal.open(path.join(__dirname, 'modal.html'), {
width: 400,
height: 300
}).then((instance) => {
instance.on('hello', (data) => {
console.log(data.some);
});
});// Modal process
modal.emit('hello', {
some: 'data'
});If you're having any problem, please raise an issue on GitHub and we'll be happy to help.
Run the test suite by doing:
$ npm test- Issue Tracker: github.com/resin-io-modules/electron-modal/issues
- Source Code: github.com/resin-io-modules/electron-modal
Before submitting a PR, please make sure that you include tests, and that the linter runs without any warning:
$ npm run lintThe project is licensed under the Apache-2.0 license.