electron-window-sizer

Use this simple and small library to persist position and dimension of an electron app. The setting is persisted in settings.json file in your app's user data dir with option for provide your own store.

Installation

Npm:

npm install electron-window-sizer

Pnpm:

pnpm add electron-window-sizer

Yarn:

yarn add electron-window-sizer

Usage

import { createWindowSizer } from "electron-window-sizer";
import { app } from "electron";

const windowSizer = createWindowSizer({
  defaultValues: {
    bounds: {
      width: 1024,
      height: 728,
    },
  },
});

function createWindow() {
  const { bounds, isMaximised } = await windowSizer.getState(); // Read the existing window bounds

  const mainWindow = new BrowserWindow({
    show: false,
    ...(bounds ?? {}),
  });

  mainWindow.on("ready-to-show", () => {
    if (isMaximised) {
      mainWindow.maximize();
    } else {
      mainWindow.show();
    }
  });

  windowSizer.watch(mainWindow); // Watch the window for change in bounds.
}

app
  .whenReady()
  .then(() => {
    createWindow();
    app.on("activate", () => {
      if (mainWindow === null) createWindow();
    });
  })
  .catch(console.log);

Advanced usage

You can modify the file storage path for storing information or provide your own storage.

Modifying the existing file store with options

import {
  createFileStore,
  type CreateFileStoreOptions,
  createWindowSizer,
} from "electron-window-sizer";

const persistantFileStore = createFileStore(
  {
    fileDir: "/path/to/your/custom/dir",
    fileName: "my-settings.json",
    settingsValidator: (data: object) =>
      !data || ("bounds" in data && "isMaximized" in data),
  } satisfies CreateFileStoreOptions,
);

const windowSizer = createWindowSizer({ store: persistantFileStore });

Creating your own store

import {
  createWindowSizer,
  type SettingsStore,
  type WindowStateOptions,
} from "electron-window-sizer";

import { persistantSettingsStore } from "./helpers/settings"; // Your own implementation of storage

const windowSizer = createWindowSizer({
  store: {
    get: async (): Promise<WindowStateOptions | null> => {
      return persistantSettingsStore.getSetting("window-size");
    },
    set: async (data: WindowStateOptions): Promise<void> => {
      return persistantSettingsStore.setSetting("window-size", data);
    },
  } satisfies SettingsStore<WindowStateOptions>,
});