kochiyaocean / electron-react-titlebar Goto Github PK

View Code? Open in Web Editor NEW

60.0 5.0 15.0 1.8 MB

A github desktop style title bar component for electron.

License: MIT License

JavaScript 14.62% HTML 0.84% CSS 32.35% TypeScript 52.18%

electron react titlebar react-virtualized

electron-react-titlebar's Introduction

electron-react-titlebar

A github desktop style title bar component for electron.

Installation

npm i --save electron-react-titlebar

Example

npm run build
npm run demo

Usage

Main process

app.on('ready', () => {
  require('electron-react-titlebar/main').initialize()
})

Renderer process

If you are using webpack

import { TitleBar } from 'electron-react-titlebar/renderer'
import 'electron-react-titlebar/assets/style.css'

ReactDOM.render(
    <TitleBar menu={menuTemplate} icon={iconPath} />,
    document.querySelector('title-bar')
)

If you're not a webpack user and wants to load css directly

ReactDOM.render(
    <TitleBar menu={menuTemplate} icon={iconPath}>
      <link rel="stylesheet" type="text/css" href={require.resolve('electron-react-titlebar/assets/style.css')} />
    </TitleBar>,
    document.body
)

Options

children?: node

Elements to be rendered in between the menu and the window controls (optional).

disableMinimize?: boolean

Disable minimize button (optional).

disableMaximize?: boolean

Disable maximize button (optional).

icon?: string

Path to icon file (optional).

browserWindowId?: number

The browserWindow's id that window controls affect to. Default value is the browserWindow that renders the component (optional).

menu?: <MenuTemplate>

Menu template of Electron's Menu (optional).

Note: electron-react-titlebar is supporting a subset of Electron's MenuItem.

Supported options:

click - supported, but the callback only have item and event parameter, and the browserWindow parameter is removed due to restriction since Electron@14
type - submenu is not supported.
label - supported
enabled - supported
visible - supported
checked - supported

Breaking changes since v1.0.0

The v1.0.0 version contains following breaking changes:

Requires [email protected] or newer version
Due to the Electron's removal of remote module since version 14, electron-react-titlebar now:
- Needs to initialize in main process (See example above)
- The require path of component has changed to electron-react-titlebar/renderer
- The currentWindow prop has been removed, instead you can control your browserWindow by browserWindowId prop
- The second parameter of callback of menuItem's click handler (the browserWindow) has been removed

If you're still using Electron below 14 and don't want to take breaking changes, you can still use 0.x version of electron-react-titlebar.

electron-react-titlebar's People

Contributors

Stargazers

Watchers

Forkers

ajbeaven narazaka insidegen tt-52101 dominicrico heddib josiahruddell pushplaylabs 7coil msfs-mega-pack trendingtechnology meetfranz evandsnyder kagamichan

electron-react-titlebar's Issues

1.2.0 package on npm contains outdated bundled files

When installing [email protected] from npm, the dist directory of the installed package contains a reference to react-virtualized, while all such references were removed from src in c01ae64.

$ npm i [email protected]

added 12 packages, and audited 13 packages in 701ms

found 0 vulnerabilities
$ rg --count-matches react-virtualized node_modules/electron-react-titlebar/src
$ rg --count-matches react-virtualized node_modules/electron-react-titlebar/dist
node_modules/electron-react-titlebar/dist/renderer.js.map:3
node_modules/electron-react-titlebar/dist/renderer.js:1

I suspect a version of the package with outdated bundle files was accidentally uploaded to npm.

This affects people who import 'electron-react-titlebar/renderer' directly, because the bundle tries to access a(n outdated) dependency that is no longer referenced in package.json.

I suggest the npm package to be updated (with a version bump like 1.2.1) to distribute the up-to-date bundles.

Menu prop is non-optional in index.d.ts

The readme says the menu prop is optional but it is non-optional in index.d.ts.

Incompatible with electron 14

Thanks for the useful library. Unfortunately, we are unable to upgrade to electron-14 due to the following bug. This appears in our console.
Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentWindow')

The error appears to occur here: electron-react-titlebar/lib/window-controls.js:78 according to the firebug console.

We are using 0.8.2 of this package.

If you have a fix, I would be glad to test it out in our codebase. TIA!

Add OS X option

Would be awesome to have a OS X version of this titlebar considering many electron-react apps will be compiled for Mac as well as Windows.

How do you drag the window ?

It works but I'm not able to perform any drag and move the window

Copy / Paste techniques

any tips on handling copy / paste?
or is that what you mean by only a subset?

Error using electron-react-titlebar

When I use electron-react-titlebar I get this error
in this file D:\Electron\test\node_modules\electron-react-titlebar\assets\style.css:1
Uncaught SyntaxError: Invalid or unexpected token
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.require.extensions.(anonymous function) [as .js] (D:\Electron\test\node_modules\electron-compile\lib\require-hook.js:77:14)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at file:///D:/Electron/test/app/MainWindow/HTML/main.html:26:1

I am using the code mentioned here with some edits

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TitleBar } from 'electron-react-titlebar';
import 'electron-react-titlebar/assets/style.css';

var template = [
    {
        label: "Menu 1",
         submenu: [
             {
                 label: "Item 1",
                 click: function() {
                     console.log("Menu 1 Item 1 clicked")
                 }
             },
             {
                 label: "Item 2",
                 click: function() {
                     console.log("Menu 1 Item 2 clicked")
                 }
             }
         ]
    },
    {
        label: "Menu 2",
        submenu: [
            {
                label: "Item 1",
                click: function() {
                    console.log("Menu 2 Item 1 clicked")
                }
            },
            {
                label: "Item 2",
                click: function() {
                    console.log("Menu 2 Item 2 clicked")
                }
            }
        ]
    }
]

ReactDOM.render(
    <TitleBar menu={template} icon={"./test.png"} disableMaximize={true} />,
    document.body
)

Uncaught Error: Cannot find module 'classnames'

I get the following error when importing electron-react-titlebar:

Uncaught Error: Cannot find module 'classnames'

I believe the classnames package should be moved from devDependencies to dependencies to fix this.