如何从远程切换到 ipcMain 和 ipcRenderer？

Question

I am making electron app with react and I have titlebar controls done with remote module but in console I am getting warning that remote module is deprecated. I want to change my code to use ipcMain and ipcRenderer instead remote but I can't get it working.

This is my code that is working 100% atm but with remote module. Can someone show on at least one function for example app.minimize() how to use ipcMain and ipcRenderer ?

import { useState, useEffect } from "react";
import { remote } from "electron";
import {
  VscChromeMinimize,
  VscChromeMaximize,
  VscChromeRestore,
  VscChromeClose,
} from "react-icons/vsc";

const TitlebarControls = ({ minimize, maximize, close }) => {
  const app = remote.getCurrentWindow();
  const [maximizeIcon, setMaximizeIcon] = useState(
    app.isMaximized() ? <VscChromeRestore /> : <VscChromeMaximize />
  );

  useEffect(() => {
    app.on("maximize", () => setMaximizeIcon(<VscChromeRestore />));
    app.on("unmaximize", () => setMaximizeIcon(<VscChromeMaximize />));
  }, [app]);

  return (
    <ul className="titlebar-controls">
      {minimize && (
        <li className="minimize" onClick={() => app.minimize()}>
          <VscChromeMinimize />
        </li>
      )}
      {maximize && (
        <li
          className="maximize"
          onClick={() =>
            !app.isMaximized() ? app.maximize() : app.unmaximize()
          }
        >
          {maximizeIcon}
        </li>
      )}
      {close && (
        <li className="close" onClick={() => app.close()}>
          <VscChromeClose />
        </li>
      )}
    </ul>
  );
};

export default TitlebarControls;

Answer 1

The remote module will be removed in Electron 14 but instead you can use @electron/remote module if you only care about deprecation. The docs give the following way to use it:

// Deprecated way
// const { BrowserWindow } = require('electron').remote
// Replace with:
const { BrowserWindow } = require('@electron/remote')

// In the main process:
require('@electron/remote/main').initialize()

If you want the ipc method to achieve the same, do the following:

In renderer.js:

const { ipcRenderer } = require('electron')
//to minimize
ipcRenderer.send('minimize', data);//data contains any extra info you may need to send

In main.js:

const { ipcMain, app } = require('electron')
ipcMain.on('minimize', (event, data) => {
    //Minimize logic
})