Electron Frameless Window

Posted on Dec. 18, 2018

electron js

frameless window

react js

1718

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.

Author

11 posts

//plugin to any test js file and proceed
//This is

import React from 'react'
//No need to give the c

//Basic way
<!DOCTYPE html>
<html>

//State Component
<!DOCTYPE html>
<html>

<!DOCTYPE html>
<html>
  <head>

//Basic way
<!DOCTYPE html>
<html>

import React from 'react'
export default class To

import React from 'react'
export default class St

import React, { Component } from 'react'

//Parent.js
import React from "react";
import Ch