reactjselectronelectron-react

how to close or minimize or maximize app in react electron


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 :


Solution

  • 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())