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.