custom-electron-titlebar
TypeScript icon, indicating that this package has built-in type declarations

4.2.8 • Public • Published

Custom Electron Titlebar

This project is a typescript library for electron that allows you to configure a fully customizable title bar.

CI License NPM Install size

📄 Documentation

Standard Title Bar

Screenshot 1

Bottom Menu Bar

Screenshot 2

Menu

Screenshot 3

Custom color

Screenshot 4

📦 Installing

You can install this package with npm, pnpm or yarn.

npm install custom-electron-titlebar
pnpm add custom-electron-titlebar
yarn add custom-electron-titlebar

🛠️ Usage

The implementation is done as follows:

In the main application file (main.js or .ts)

import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";

// setup the titlebar main process
setupTitlebar();

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    //frame: false, // needed if process.versions.electron < 14
    titleBarStyle: 'hidden',
    /* You can use *titleBarOverlay: true* to use the original Windows controls */
    titleBarOverlay: true,
    webPreferences: {
      sandbox: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });
  
  ...

  // attach fullScreen(f11 and not 'maximized') && focus listeners
  attachTitlebarToWindow(mainWindow);
}

In the preload file (preload.js or .ts)

import { Titlebar } from "custom-electron-titlebar";

window.addEventListener('DOMContentLoaded', () => {
  // Title bar implementation
  new Titlebar();
});

To see the options you can include in the Title Bar constructor, such as color of elements, icons, menu position, and much more, and the methods you can use, go to the wiki

💰 Support

If you want to support my development, you can do so by donating through 💖 Sponsor

📝 Contributors

I would like to express my sincere gratitude to all the people who have collaborated in the development and advancement of this project. I appreciate your contributions.

✅ License

This project is under the MIT license.

/custom-electron-titlebar/

    Package Sidebar

    Install

    npm i custom-electron-titlebar

    Weekly Downloads

    2,565

    Version

    4.2.8

    License

    MIT

    Unpacked Size

    527 kB

    Total Files

    67

    Last publish

    Collaborators

    • alextorresdev