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. ;)
[e-mail]

Nice coding! :)