@euclidesdry/electron-pretty-titlebar

Pretty Electron Titlebar

A pretty way to add Titlebar in a Electron app using ReactJS

Installation

npm install @euclidesdry/electron-pretty-titlebar

Or

yarn add @euclidesdry/electron-pretty-titlebar

Set the frame property to fasle and webPreferences.nodeInteraction to true on the BrowserWindow Instance inside your main.(js/ts) file.

mainWindow = new BrowserWindow({
	width: 1280,
	height: 840,
	frame: false, // <- Add this line
	webPreferences: {
		nodeIntegration: true, // <- Add this line too
	},
});

Set the setup and attachToWindow built-in functions into your project main.(js/ts) file as the following:

import { setup, attachToWindow } from '@euclidesdry/electron-pretty-titlebar';
import { BrowserWindow, ipcMain } from 'electron';

let mainWindow: BrowserWindow | null;

setup(); // <- Add this line

async function createWindow(): Promise<void> {
	// Create the browser window.
	mainWindow = new BrowserWindow({
		width: 1280,
		height: 840,
		frame: false,
		webPreferences: {
			nodeIntegration: true,
		},
	});

	mainWindow.on('closed', function () {
		mainWindow = null;
	});

	attachToWindow(ipcMain, mainWindow);  // <- Add this line too

	...
}

and last but not least, add preloadConfig() function to your project preload.(js|ts) file:

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

import { preloadConfig } from '@euclidesdry/electron-pretty-titlebar';

preloadConfig();

Instructions (How to use)

App to your App.(tsx/jsx) file:

import React from 'react';

import { Titlebar } from '@euclidesdry/electron-pretty-titlebar';

export default function App() {
	return <Titlebar title='Hello World' logo={logoPathOrURL} />;
}

if you want to add your own custom window triggers then do the following:

import React from 'react';
import electronEnabled from 'is-electron';

import { Titlebar } from '@euclidesdry/electron-pretty-titlebar';

const requiredModule = electronEnabled() ? 'electron' : 'is-electron';
const { ipcRenderer } = window.require ? window.require(requiredModule) : false;

const ipc = ipcRenderer;

export default function App() {
	const handleVerifyIfWindowIsMaximized = async (size: number[] = []) => {
        if (ipcRenderer) {
            const response_ = await ipcRenderer.invoke('windowsIsMaximized');
            setAppIsMaximized(!!response_);
            return await response_;
        }
    };

    useLayoutEffect(() => {
        if (ipcRenderer) {
            const updateSize = async () => {
                setSize([window.innerWidth, window.innerHeight]);

                const body = document.querySelector('body') as HTMLBodyElement;
                body.style.width = window.innerWidth.toString();
                handleVerifyIfWindowIsMaximized(size);
            };
            window.addEventListener('resize', updateSize);
            updateSize();
            return () => window.removeEventListener('resize', updateSize);
        }
    }, []);

	const handleMinimizeApp = () => {
		if (ipc) ipc.send('minimizeApp');
	};

	const handleMaximizeRestoreApp = async () => {
		if (ipc) ipc.send('maximizeRestoreApp');

		handleVerifyIfWindowIsMaximized();
	};

	const handleCloseApp = () => {
		if (ipc) ipc.send('closeApp');
	};

	return (
		<Titlebar
			title='Hello World'
			logo={logoPathOrURL}
			onClose={handleCloseApp}
			onMinus={handleMinimizeApp}
			onMinimazeMaximaze={handleMaximizeRestoreApp}
		/>
	);
}