electron-dialogs
v1.4.0
Published
A simple library that allows you to create dialogs like alert, confirm and prompt in Electron applications easily and quickly.
Downloads
39
Readme
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! :)