how to communicate between react and electron

Question

Creating desktop application using react and electron.I want to call method in main.js of electron from react component.In angular there was a npm package.

import React, { useState, useEffect, useRef } from 'react';
import './diagnosis.css';
const electron = window.require('electron');// if i use require('electron') throws error
function Diagnosis(props) {
    const [data, setData] = useState({ hits: [] });
    useEffect(() => {
        getExeFiles();
    });
    const getExeFiles = () => {
        electron.ipcRenderer.send('get-exe'); 
    }
    return(<></>)
}

main.js

electron.ipcMain.on('get-exe', () => {
    console.log('reaciovg');
    mainWindow.webContents.send('return-exe', '');
});

How to overcome this issue?

At your main process, the *reaciovg* string is being shown correctly? — tpikachu, Jan 10 '20 at 11:49

tpikachu · Accepted Answer · 2020-01-10T15:35:04.683

3

At your Renderer.js

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

async function runCommand(cmd) {
  const res = await ipcRenderer.sendSync('runCommand', cmd);
  return res;
}

At you main.js

// Listen event through runCommand channel
// And return the result to Renderer.
ipcMain.on('runCommand', async (event, arg) => {
  event.returnValue = await runCommand(arg);
});

This is the simplest way to communicate between main and renderer process.

But I think you are going to send the result from the main process to renderer using mainWindow.webContents.send('return-exe', '');

So this means, you are sending the result through return-exe IPC channel from main to renderer. And you should listen event from this channel at your renderer. Like this

ipcRenderer.on('retrun-exe', (event, arg) => {
    ...
});

You can add this listener at your lifecycle functions. I was used to add this to componentDidMount() But in your case, please add this to your useEffect()

edited Jan 10 '20 at 15:35

answered Jan 10 '20 at 11:56

tpikachu

4,478
2
17
42

UI is not correctly rendering ..It triggers the event – Karthi Jan 10 '20 at 12:12
how to listen to main process to renderer event in react..Why that ui half renders. – Karthi Jan 10 '20 at 12:14
@Krazy to use your require check this answer https://stackoverflow.com/questions/59533379/simple-example-of-electron-app-with-spectron-test/59534342#59534342 – tpikachu Jan 10 '20 at 14:45
Simple to use require directly. You should enabled the nodeIntegration flag as true when you creating browserWindow – tpikachu Jan 10 '20 at 14:45
@Krazy. What do you mean by *Why that ui half renders* – tpikachu Jan 10 '20 at 14:46
I was used to set the listener at **componentDidMount** lifecycyle function like this. `componentDidMount() { ipcRenderer.on('runCommand',(ev, data)=>{ this.forceUpdate(); }); }` ``` – tpikachu Jan 10 '20 at 14:49
So in your case, please add this to your `useEffect()` – tpikachu Jan 10 '20 at 14:50
why we can't directly use require instead of window.require.because what I'm doing now is I'm hosting react app in herkou and providing hosted url. Now its throwing error for window.require in browser but not in electron..is there any way to achieve this. – Karthi Jan 13 '20 at 07:18
@Krazy. You should check this. Actually, this is really common but a little bit confusing issue. https://github.com/electron/electron/issues/7300. You can find the answer as you need here. – tpikachu Jan 13 '20 at 12:42

how to communicate between react and electron

1 Answers1

Linked