electron-notification
A cross platform notification plugin for electron
It uses BrowserWindows for the notifications, it also resizes the height of the window dynamically depending of the content size
The notifications requires the electron screen api which cannot be run before app.ready
TODO
- Write a better README
Changelogs
1.0.1
- Added ability to use sounds
- Added icon position left or right
- Max notifications can now be set, a queue system has been implemented aswell
- Custom styles are now available in the options variable either base, dark or light can be changed.
Installation
Install with npm:
npm install --save @wuild/electron-notification
const Notification = require("@wuild/electron-notification");
Themes
Options
Name | type | default | description | alternatives |
---|---|---|---|---|
title | String | -- | Notification title | |
body | String | -- | Notification body (can be html) | |
position | String | top-right | Notification position | top-left, top-right, bottom-left, bottom-right |
theme | String | light | Notification theme | light, dark |
width | Integer | 560 | Notification width | |
icon | String | default icon | Notification icon | |
iconPosition | String | left | Notification icon position | left, right |
timeout | Integer | -- | Close notification after milliseconds | |
bottom | Integer | 15 | Margin between notifications, | |
sound | String | -- | Absolute path to audio file, | |
style.base | Object | -- | Default notification base style | |
style.dark | Object | -- | Dark notification style | |
style.light | Object | -- | Light notification style |
Events
Name | description |
---|---|
show | When the notification is shown |
close | When the notification is closed |
click | When the notification is clicked |
dblclick | When the notification is double clicked |
resize | When the notification is resized |
Methods
Name | description |
---|---|
show | Create and open the notification |
close | Close the notification |
closeAll | (Static) Close all open notification |
setMaxNotifications | (Static) Set max amount of notifications visible |
Example
const {app} = require("electron");
const Notification = require("@wuild/electron-notification");
// Set max amount of notifications visible
Notification.setMaxNotifications(5);
app.on("ready", function () {
let note = new Notification({
theme: "light",
title: "This is a notification",
sound: "absolute path to audio file",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus eget risus sed porta. Cras vehicula nunc euismod, pellentesque ligula gravida, gravida ante. Etiam dapibus, eros at aliquet tincidunt."
});
note.on("close", function(){
console.log("Notification has been closed");
});
note.show();
let note2 = new Notification({
theme: "dark",
title: "This is a notification",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus eget risus sed porta. Cras vehicula nunc euismod, pellentesque ligula gravida, gravida ante. Etiam dapibus, eros at aliquet tincidunt."
});
note2.on("click", function(){
console.log("Notification has been clicked");
});
note2.on("dblclick", function(){
console.log("Notification has been doubled clicked");
});
note2.show();
});
Default style object
{
base: {
body: {
display: "flex",
flexDirection: "row",
flex: 1,
minHeight: "1px",
height: "100%"
},
close: {
position: "absolute",
zIndex: 10,
right: "5px",
top: 0,
padding: "7px"
},
sidebar: {
display: "flex",
width: "150px",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
flexGrow: 0,
padding: "17px"
},
container: {
flex: 1,
minHeight: "1px",
padding: "15px"
},
title: {
padding: 0,
margin: 0
},
content: {
overflow: "visible"
}
},
dark: {
sidebar: {
backgroundColor: "#262a2e"
},
container: {
backgroundColor: "#2d3135",
color: "hsla(0, 0%, 100%, .6)"
},
close: {
color: "hsla(0, 0%, 100%, .6)"
}
},
light: {
sidebar: {
backgroundColor: "#f6f6f6"
},
container: {
backgroundColor: "#fff",
color: "#2c2c2c"
},
close: {
color: "#000"
}
}
}
License
Copyright © 2018, Wuild Released under the MIT license.