custom-react-electron-titlebar

simple custom electron title bar with react

latest

Source

npm

Version: 1.0.6

Version published: 6 years ago

Weekly downloads: 2

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

custom-react-electron-titlebar

Simple titlebar for electron apps for every system.

Scrennshots

Usage

Install with NPM.

npm install custom-react-electron-titlebar --save

In electron.js file:

const electron = require("electron");
const { app,ipcMain,BrowserWindow } = electron;
 mainWindow = new BrowserWindow({
        frame: false,
        titleBarStyle: 'hidden'});
..
..
.. 
ipcMain.handle("minimize-event", () => {
    mainWindow.minimize();
});

ipcMain.handle("unmaximize-event", () => {
    mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize();
});

ipcMain.handle("close-event", () => {
    app.quit();
});

In your Component:

import TitleBar from "custom-react-electron-titlebar"
..
..
..
render(){
  let options = {
            backgroundColor: "#000",
            iconsColor: "#FFF",
            title: "To Do List",
            titleColor: "#FFF",
            icon: true,
            closeIconClass: "fa fa-times",
            maximizeIconClass: "fa fa-square-o",
            minimizeIconClass: "fa fa-minus"
        }
return(<TitleBar options = { options }/>)}

-backgroundColor:[String] background of titlebar.
-iconsColor:[String] color of fontAwesome Icon.
-title:[String] title of project.
-titleColor:[String] color of project title.
-icon:[Boolean] true | false (get icon href from index.html).

<head>
 <link rel="icon" href="/list.png" />
</head>

-closeIconClass:fontAwesome class of close icon.
-maximizeIconClassfontAwesome class of maximize icon.
-minimizeIconClass:fontAwesome class of minimize icon.

Report an issue if you find there's something wrong

Keywords

ReactJS

electronJS

titlebar

FAQs

What is custom-react-electron-titlebar?

Is custom-react-electron-titlebar popular?

Is custom-react-electron-titlebar well maintained?

Package last updated on 15 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install