1.2.7 • Published 1 year ago

electron-tray-window v1.2.7

Weekly downloads
7
License
MIT
Repository
github
Last release
1 year ago

npm version npm version npm version npm version npm version


Electron Tray Window, basically places the window near the tray icon. While these happening, you can customize window / tray or tracking the events.

Preview demo project

Install

npm install electron-tray-window

or

yarn add electron-tray-window

Usage

const trayWindow = require("electron-tray-window");

You can use different ways. "setOptions()" function accepts object value.

If you have already created tray or window outside TrayWindow, you can pass as arguments to .setOptions() function,

//...

tray = new Tray(...);
window = new BrowserWindow(...);
window.loadUrl(...);

trayWindow.setOptions({tray: tray,window: window});

//...

or if you pass just tray icon path or window url, it prepare automatically.

//...

trayWindow.setOptions({
  trayIconPath: "...",
  windowUrl: "..."
});

//...

By the way you can make different combines. But object must contains;

  • tray or trayIconPath
  • window or windowUrl
//...

tray = new Tray(...);
trayWindow.setOptions({
  tray: tray,
  windowUrl: "..."
});

//...

window = new BrowserWindow(...);

trayWindow.setOptions({
  trayIconPath: "...",
  window: window
});

//...

Other Functions

You can always change TrayWindow with setOptions() and you can use different functions after setOptions().

.setTray( tray )

//...

trayWindow.setOptions({...});

//...

differentTray = new Tray(...);

trayWindow.setTray(differentTray); //now, follows different tray

//..

.setWindow( window )

//...

trayWindow.setOptions({...});

//...

differentWindow = new BrowserWindow(...);

trayWindow.setWindow(differentWindow); //now, shows different window

//..

.setWindowSize( object )

//...

trayWindow.setOptions({...});

//...

differentWindow = new BrowserWindow(...);

trayWindow.setWindowSize({
    width    : 200,    //optional
    height   : 300,   //optional
    margin_x : 10,  //optional
    margin_y : 10   //optional
});

//..

Events

You can listen events. All event contains window and tray objects

//...
const { ipcMain } = electron;

ipcMain.on("tray-window-ready", (e, a) => {
  console.log("tray window is ready");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-clicked", (e, a) => {
  console.log("clicked the tray icon");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-visible", (e, a) => {
  console.log("tray window is visible now");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-hidden", (e, a) => {
  console.log("tray window is hidden now");
  //console.log(e.window)
  //console.log(e.tray)
});

//..

Overview

All parameters of setOptions()

parameterdescriptiondefault
trayElectron's tray object type
trayIconPathImage file path
windowElectron's BrowserWindow object type
windowUrlHtml etc. file path or website url
widthWindow width200px
heightWindow height200px
margin_xVertical distance between window and tray icon0px
margin_yHorizontal distance between window and tray icon0px
framedIs it window framed?false

Other functions

functiondescription
setTrayElectron's tray object type.
setWindowElectron's BrowserWindow object type
setWindowSizeObject type. Optional arguments width, height, margin_x, margin_y

IPC (Inter-Process Communication) Events

eventdescription
tray-window-readywhen created TrayWindow.
tray-window-clickedwhen clicked tray icon
tray-window-visiblewhen window show up
tray-window-hiddenwhen window close down

Default Window Properties

propertiesdefault in TrayWindow
width200px
height300px
maxWidth200px
maxHeight300px
showfalse
framefalse
fullscreenablefalse
resizablefalse
useContentSizetrue
transparenttrue
alwaysOnToptrue
webPreferences{backgroundThrottling}false

P.S. : if you use this way setOptions({windowUrl:"..."}), default window values uses.

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago