Search code examples
reactjstypescriptelectronipcipcrenderer

ipcRenderer not getting triggered


I'm trying to use IPC to communicate between my react component and main electron process. In component :

export default class A extends React.Component{
.....
  openFile = () => {
    console.log('test');
    ipcRenderer.send('file-command', 'open');
  };
.....
}

And in main.dev.ts :

  mainWindow.webContents.on('file-command', () => {
    console.log('file open request');
  });

  mainWindow.on('file-command', () => {
    console.log('file open request');
  });

  ipcRenderer.on('file-command', () => {
    console.log('file open request');
  });

Tried all separately. But none of these works.

How can I use IPC properly, in my react-electron application. I've used this boilerplate : https://github.com/electron-react-boilerplate/electron-react-boilerplate


Solution

  • ipcRenderer is the module you should, and do, use in the renderer process (either scripts attached to HTML pages if there is no contextIsolation, or preload otherwise).

    The module to use in the main process is called ipcMain.

    const {ipcMain} = require('electron');
    
    ipcMain.on('file-command', () => {
      console.log('file open request');
    });
    

    You may also want to look into invoke/handle in ipcRenderer and ipcMain, respectively. They make working with IPC a lot more pleasant.