Electron setSize method and ReactJS

Question

I removed frame from electron and added custom buttons for collapsing, closing and maximizing/minimizing.

collapsing and closing works fine, but minimize/maximize makes blinks and returns to fullscreen

const [bounds, setBounds] = useState({width: 600, height: 600, x: 50, y: 50}) is a default bounds

useEffect(() => {
        if (maximized) {
          remote.BrowserWindow.getFocusedWindow().maximize()
        } else {
          //here is a problem
          remote.BrowserWindow.getFocusedWindow().setBounds(bounds)
        }
      }, [bounds, bounds.height, bounds.width, maximized])

How to resize window correctly? Also I tried remote.BrowserWindow.getFocusedWindow().setSize()

Your question is not fully clear. Do you want to resize? Or do you want to maximize/unmaximize? You know that there's something like `remote.BrowserWindow.getFocusedWindow().unmaximize()`, right? And if the window is fullscreen, you should probably un-fullscreen it first. `remote.BrowserWindow.getFocusedWindow().setFullScreen(false)`. — JHBonarius, Nov 14 '19 at 07:40

score 1 · Accepted Answer · answered Nov 14 '19 at 06:33

Create a transparent window with put a fullscreenable = false like this

const mainWindow = new BrowserWindow({
      width: customWidth,
      height: CustomHeight,
      x: positionMarginX,
      y: positionMarginY,
      skipTaskbar: process.platform !== 'darwin',
      fullscreenable: false,
      frame: false,
      resizable: false,
      hasShadow: false,
      transparent: true,
      minimizable: false,
      maximizable: false,
      darkTheme: true,
      closable: false,
      titleBarStyle: 'customButtonsOnHover',
      webPreferences: {
        webSecurity: false,
        nodeIntegration: true,
      },
    })

And use IPC render in react side like this

 ipcRenderer.send(
          'window-resize',
          300, // height
          300  // width
        )

Then use IPC main to handle that event like this

ipcMain.on('window-resize', (e,height, width) => {
windowSize = {
        width: width,
        height: height,
        x: customX,
        y: customY,
      }
      mainWindow.setBounds(windowSize)
})

and if you work on custom control then follow this URL Frameless window with controls in electron (Windows)

Electron setSize method and ReactJS

1 Answers1