# @skybluefeet/custom-electron-titlebar

> Library for electron that allows you to configure a fully customizable title bar.

Latest version **4.3.0** (published 2023-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skybluefeet/custom-electron-titlebar
pnpm add @skybluefeet/custom-electron-titlebar
yarn add @skybluefeet/custom-electron-titlebar
bun add @skybluefeet/custom-electron-titlebar
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.3.0 |
| Published | 2023-03-12 |
| First published | 2023-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 184.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | SkyBlueFeet |
| Maintainers | skybluefeet |
| Keywords | typescript, electron, title bar, menubar, windows, linux |

## Links

- npm: https://www.npmjs.com/package/@skybluefeet/custom-electron-titlebar
- Repository: https://github.com/SkyBlueFeet/custom-electron-titlebar
- Homepage: https://github.com/SkyBlueFeet/custom-electron-titlebar#readme
- Issues: https://github.com/SkyBlueFeet/custom-electron-titlebar/issues
- npm.io page: https://npm.io/package/@skybluefeet/custom-electron-titlebar

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 4.3.0 (latest) — 2023-03-12
- 4.2.3 — 2023-03-12
- 4.2.1 — 2023-03-09
- 4.2.0 — 2023-03-09
- 4.1.6 — 2023-03-09

## README

# Custom Electron Titlebar

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

[![LICENSE](https://img.shields.io/github/license/AlexTorresDev/custom-electron-titlebar.svg)](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)
[![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
[![install size](https://packagephobia.com/badge?p=custom-electron-titlebar)](https://packagephobia.com/result?p=custom-electron-titlebar)

![Screenshot 1](screenshots/cet-001.jpg)

![Screenshot 2](screenshots/cet-002.jpg)

![Screenshot 3](screenshots/cet-003.jpg)
<br><br>

# 📦 Installing
You can install this package with `npm`.
```sh
npm install custom-electron-titlebar
```
<br>

# 🛠️ Usage
The implementation is done as follows:

In the main application file (main.js or .ts)
```js
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,
    titleBarStyle: 'hidden',
    //frame: false, // needed if process.versions.electron < 14
    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)
```js
import { Titlebar } from "custom-electron-titlebar";

window.addEventListener('DOMContentLoaded', () => {
  // Title bar implemenation
  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](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
<br><br>

## 💰 Support
If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresDev)
<br><br>

## ✅ License
This project is under the [MIT](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE) license.

---
_Source: https://npm.io/package/@skybluefeet/custom-electron-titlebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._