reactjselectronelectron-react-boilerplate

Pass data from electron project to iframe


I have an electron app and inside that app I have an iframe which calls a url that runs a different react project. So I am able to send data from react project to electron project by using;

declare global {
  interface Window {
    api? : any
  }
}

window.api.send("print", allData); // THAT WORKS 

my preload.js has;

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["print", "getPrinters"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["receiptStatusBack", "printers"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

I want to send data by using something like this;

function sendPrintStatusToServer(result) {
    console.log("Print status: ", result)
    win.webContents.send("receiptStatusBack", result);
}

from electron app and catch that data from react part that works in iframe.

How can i get that data in react app ?

Thanks in advance


Solution

  • Below code worked for me.

    declare global {
      interface Window {
        api? : any
      }
    }
    
    if(isElectron()) {
      window.api.receive("printers", (printerList) => {
        console.log("[PRINTER.TSX..] Printers: ", printerList);
      })
      window.api.receive("receiptStatusBack", (data) => {
        console.log("[PRINTER.TSX..] Print status: ", data);
      })
    }
    
    function isElectron() {
      // Renderer process
      if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
        return true;
      }
    
      // Main process
      if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
        return true;
      }
    
      // Detect the user agent when the `nodeIntegration` option is set to false
      if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
        return true;
      }
    
      return false;
    }