@el3um4s/ipc-for-electron

v1.0.7

Published

2 years ago

A package to simplify the communication between renderer and node js in Electron applications

Downloads

0High
0Medium
0Low

el3um4s

typescript npm electron electronjs node nodejs renderer ipc inter-process communication

IPC for Electron

A package to simplify the communication between renderer and node js in Electron applications

NPM link: @el3um4s/ipc-for-electron

Install and use the package

To use the package in a project:

npm i @el3um4s/ipc-for-electron

and then in a file:

import { IPC, generateContextBridge } from "@el3um4s/ipc-for-electron";

How to add a new API

Use IPC to create a new API for the renderer process:

import { IPC, SendChannels } from "@el3um4s/ipc-for-electron";
import { BrowserWindow } from "electron";

const nameAPI = "helloWorld";

// to Main
const validSendChannel: SendChannels = {
  requestHello: requestHello,
};

// from Main
const validReceiveChannel: string[] = ["getHello"];

const systemInfo = new IPC({
  nameAPI,
  validSendChannel,
  validReceiveChannel,
});

export default helloWorld;

// Enter here the functions for ElectronJS

function requestHello(
  mainWindow: BrowserWindow,
  event: Electron.IpcMainEvent,
  message: any
) {
  const result = {
    name: "John",
    message: "Hello",
  };
  mainWindow.webContents.send("getHello", result);
}

Add the API to the context bridge

Add the api to the context bridge to use it in the renderer process. In the preload.ts file:

import { generateContextBridge } from "@el3um4s/ipc-for-electron";
import helloWorld from "./helloWorld";

const listAPI = [helloWorld];

generateContextBridge(listAPI, "ipc");

Use the API from the renderer

In the renderer process, use the API:

globalThis.ipc.helloWorld.send("requestHello", null);

globalThis.ipc.helloWorld.receive("getHello", async (data) => {
  const { name, message } = data;
  console.log(message, name);
  //   Hello John
});

API Prebuilt

System Info: Allow the renderer to get information about the version of Electron, Chrome and NodeJS

Window Controls: Allow the renderer to close, minimize and maximize the window

Chokidar: Allow the renderer to use chokidar (Minimal and efficient cross-platform file watching library)

Auto Updater: Allow the renderer to update electron apps via electron-updater

GitHub: el3um4s/ipc-for-electron-auto-updater - el3um4s/renderer-for-electron-auto-updater
NPM: @el3um4s/ipc-for-electron-auto-updater - @el3um4s/renderer-for-electron-auto-updater Auto Updater: Allow the renderer to update electron apps via electron-updater

Electron Window: Create a window with optional autoupdater and browserview

Published

Vulnerabilities

Links

Maintainers

Keywords