Electron Frameless Window

Posted on Dec. 18, 2018
electron js
frameless window
react js

A frameless window is a window without having any control to the title bar , menu bar . It is more are like a simple webpage.

You can adjust the electron app height and width dynamically by Dynamic height and width.

We can make the electron app as frameless using 

mainWindow = new BrowserWindow({frame: false, width: 1000, height: 500})

 but once if you make the app as frameless , all the controls like dragging , minimizing, maximizing, closing of the tool will be lost.

Electron is providing api's for the events like minimize, maximize, close and full screen. you can custommize according to your choice.

Dragging functionality restores once we set the style of customized title division to 

Suppose if you are rendering title division at the top of main component, apply the below style to the title division.

.titlediv {

   '-webkit-app-region': 'drag',;

   '-webkit-user-select': 'none'





Please log in to leave a comment.