electron-dialogs

A simple library that allows you to create dialogs like alert, confirm and prompt in Electron applications easily and quickly.

Newests

• Now you can use the progress function.
• New styles for dialogs.
• Now you can create multiple dialogs at the same time without interfering with each other.

Basic Usage

Installation

npm i electron-dialogs yarn add electron-dialogs

Main codes

// Require main function from electron-dialogs
const { main } = require('electron-dialogs');

// Create an Electron window
const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
		nodeIntegration: true,
		webSecurity: false,
	},
});

// Set a file to be loaded by your window
win.loadFile('path/to/your/file.html');

// Set a window and a channel to electron-dialogs
main(win, 'dialogs-test');

Renderer codes

// Require electron-dialogs and pass the same channel you did on Main
const dialogs = require('electron-dialogs').renderer('dialogs-test');

Alert function

dialogs.alert({
	title: 'My alert',
	message: 'This is an alert from electron-dialogs.',
	type: 'info', // info, danger
	dismissText: 'OK'
}, () => {
	console.log('Your alert is closed.');
});

// Or

await dialogs.alert({
	title: 'My alert',
	message: 'This is an alert from electron-dialogs.',
	type: 'info', // info, danger
	dismissText: 'OK'
});

console.log('Your alert is closed.');

Confirm function

dialogs.confirm({
	title: 'My confirm',
	message: 'This is a confirm from electron-dialogs.',
	confirmText: 'OK',
	cancelText: 'Cancel'
}, (confirmed) => {
	if(confirmed) console.log('Confirmed!');
});

// Or

const confirmed = await dialogs.confirm({
	title: 'My confirm',
	message: 'This is a confirm from electron-dialogs.',
	confirmText: 'OK',
	cancelText: 'Cancel'
});

if(confirmed) console.log('Confirmed!');

Prompt function

dialogs.prompt({
	title: 'My prompt',
	message: 'This is a prompt from electron-dialogs.',
	value: 'My prompt value',
	confirmText: 'OK',
	cancelText: 'Cancel'
}, (res) => {
	if(!res.canceled) console.log(res.value);
});

// Or

const { canceled, value } = await dialogs.prompt({
	title: 'My prompt',
	message: 'This is a prompt from electron-dialogs.',
	value: 'My prompt value',
	confirmText: 'OK',
	cancelText: 'Cancel'
});

if(!canceled) console.log(value);

Progress function

const { changeStatus, finish } = dialogs.progress({
	title: 'Processing something',
	message: 'Getting started',
	autoClose: false,
	changeableBar: true
});

setTimeout(() => {
	changeStatus({ message: 'We are at 10%', percentage: 10 });
}, 3000);

setTimeout(() => {
	changeStatus({ message: 'We are at 50%', percentage: 50 });
}, 4000);

setTimeout(() => {
	changeStatus({ message: 'We are at 90%', percentage: 90 });
}, 5000);

setTimeout(() => {
	finish('Finished!');
}, 6000);

// ATTENTION!
// When 'autoClose' is true, the dialog is closed when the finish function is called.
// When 'changeableBar' is false, the progress bar will always be filled
// The progress dialog can only be closed or dismissed after the finish function is called.

Tell me about an error you found or a good idea you had. ;) [email protected] Nice coding! :)