Electron Valtio

What is this?

This library's purpose is to share state between the Electron main process and various renderer windows simply through mutations of an object. This library utilizes the valtio library to accomplish this.

This library was heavily inspired by electron-redux.

How do I use it?

Getting started

npm i valtio electron-valtio

Include the preload script when opening the browser window

...
const window = new BrowserWindow({
  ...other options,
  webPreferences: {
    // Or you can import it in your existing preload file
    preload: path.resolve(__dirname, 'node_modules/electron-valtio/preload.js')
  }
});
...

Initialize store in the main process

import { snapshot } from 'valtio/vanilla';
import { setupMain } from 'electron-valtio/main';

const store = setupMain({
  count: 0,
});

setTimeout(() => {
  console.log(snapshot(store.count));
  // Output: 1
}, 2000);

Initialize store in the renderer process

import { snapshot } from 'valtio/vanilla';
import { setupRenderer } from 'electron-valtio/renderer';

const store = setupRenderer();
console.log(snapshot(store.count));
// Output: 0

store.count++;

Use all the features of Valtio

Main process

import { store } from './store';
const incrementCount = () => (store.count += 1);
incrementCount();

Renderer process

import React, { FC } from 'react';
import { useSnapshot } from 'valtio';
import { store } from './store';

export const Counter: FC => () => {
  const count = useSnapshot(store.count);
  return <>{count}</>
}