how to close or minimize or maximize app in react electron

Question

I'm building a react-electron app. I created a custom window header but I can't access app.quit() & a.*() in my project.

app.js(react):

i tried both type :

1.import electron from "electron"; 2.const electron = require('electron')

<div onClick={()=>{
electron.app.quit()
}} </div>

main.js :

const mainWindow = new BrowserWindow({
    width: 900,
    height: 675,
    frame: false,
    webPreferences: {
        nodeIntegration: true,
        enableRemoteModule: true
    }

})
mainWindow.loadURL('http://localhost:3000');

i run the app with this script:

"start": "concurrently \"npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",

i got this error :

Answer 1

i found the answer. hope this help someone : add this to your main.js:

webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: true,
            contextIsolation: false
        }

and use it in react component like this:

const { ipcRenderer } = window.require('electron');

<img onClick={()=>{ipcRenderer.send('close',[])}}  src={""}/>

and use it in main.js like this :

const {ipcMain} = require('electron')

ipcMain.on('close',()=>app.quit())

Answer 2

you need to use the ipc to send message from renderer(React) to main process (Nodejs). For exemple, if you want to close , you can listen the event in main process like this.

this.ipcMain.on('closeApp', () => {
      this.win.close();
    });

And send the event from renderer like this

window.electron.ipcRenderer.sendMessage('closeApp');