{"id":15792904,"url":"https://github.com/obsius/electronbar","last_synced_at":"2025-08-13T17:21:21.013Z","repository":{"id":50287147,"uuid":"171825244","full_name":"obsius/electronbar","owner":"obsius","description":"React title bar component for Electron.","archived":false,"fork":false,"pushed_at":"2024-11-01T23:51:53.000Z","size":944,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T05:26:37.321Z","etag":null,"topics":["custom","electron","frameless","menu","menubar","titlebar"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/obsius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-21T07:49:23.000Z","updated_at":"2024-11-01T23:51:56.000Z","dependencies_parsed_at":"2024-06-21T13:09:41.656Z","dependency_job_id":"22644c76-4585-4793-96cd-c3ac5a712a1d","html_url":"https://github.com/obsius/electronbar","commit_stats":{"total_commits":71,"total_committers":1,"mean_commits":71.0,"dds":0.0,"last_synced_commit":"886a3238310b0631b7b73adc9e8a4c160dfb9cd4"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/obsius/electronbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obsius%2Felectronbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obsius%2Felectronbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obsius%2Felectronbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obsius%2Felectronbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/obsius","download_url":"https://codeload.github.com/obsius/electronbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obsius%2Felectronbar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269699114,"owners_count":24461203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom","electron","frameless","menu","menubar","titlebar"],"created_at":"2024-10-04T23:06:48.403Z","updated_at":"2025-08-13T17:21:20.960Z","avatar_url":"https://github.com/obsius.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electronbar\n\nElectronbar is a react component and handler for frameless Electron windows that need a browser rendered titlebar and menu. It is completely customizable and renders faster than some of the alternatives.\n\n## Migrations\n\n### Version 1 -\u003e 2\n\n`electron.remote` has been deprecated. Pass the object from `https://github.com/electron/remote` instead.\n\n## Notes\n\nThis package has been made for Windows, although anyone wishing to modify this to match a Linux or Mac look and feel is encouraged to do so and contribute. The source is small, so it should be simple to make any modifications or enhancements.\n\n## Screenshots\n![screenshot1](https://raw.githubusercontent.com/obsius/electronbar/master/doc/1.png \"Disabled Example\")\n![screenshot2](https://raw.githubusercontent.com/obsius/electronbar/master/doc/2.png \"Enabled Example\")\n![screenshot3](https://raw.githubusercontent.com/obsius/electronbar/master/doc/3.gif \"Moving Example\")\n\n## Features\n\n##### Window\n\nMaximize, minimize, restore, and close buttons are provided.\n\n##### Electron Menu support\n\nUses the native Electron.Menu object to build from. Prevent clicking/expanding and use a different style for disabled or invisible Electron menu items.\n\n##### Updating\n\nMenus, title, and icon can be updated at any time.\n\n##### Accelerators\n\nPasses the menu to Electron to bind accelerator shortcuts.\n\n##### Accelerator Translations\n\nConvert things like `CtrlOrCmd` to the appropriate button for the system. Cmd icon **\u0026#8984;** on Mac or **Ctrl** on Windows, etc.\n\n##### Fullscreen\n\nDetects fullsceen and preserves the titlebar with a different button layout to leave fullscreen.\n\n##### Handler\n\nHas a reference to Electron so it can manage different OS's, listeners to window changes (focus, etc). *Feel free to contribute and build more support for Electron window states.*\n\n## Layout\n\nThe titlebar has four main components listed below with the corresponding CSS class names for each.\n\nIcon | Menu | Title | Buttons\n-|-|-|-\nelectronbar-favicon | electronbar-menu | electronbar-title | electronbar-buttons\n\n## Integrating\n\nElectronbar exposes a class to make a new Electronbar, the constructor for this takes a DOM element as a mounting point. See below for an explanation.\n\n### Reference\n\n```js\nimport Electronbar from 'electronbar';\nconst Electronbar = require('electronbar');\n\nconst electronbar = new Electronbar({\n\telectron: '\u003cpass the electron remote object here [https://github.com/electron/remote] (for v1, pass the electron object)\u003e',\n\twindow: '\u003cpass the reference to the electron window here\u003e',\n\tmenu: '\u003cpass a reference to your menu, not the template, but the Menu.buildFromTemplate() object\u003e',\n\tmountNode: '\u003cDOM element container that will hold Electronbar, use document.getElementById() or make a ref in React for this\u003e',\n\ttitle: '\u003ctext for title\u003e',\n\ticon: '\u003capp icon\u003e'\n});\n\nelectronbar.setMenu(menu); // update the menu\nelectronbar.setIcon(path); // update the icon\nelectronbar.setTitle(title); // update the title\n```\n\n### Working Example\n\n```js\nimport React from 'react';\nimport Electronbar from 'electronbar';\n\nimport 'electronbar/lib/electronbar.css';\nimport './my-electronbar-style-override.css';\n\nconst electronRemote = window.require('@electron/remote'); // for v1: const electron = window.require('electron');\n\nconst menuTemplate = [\n\t{\n\t\tlabel: 'Hello',\n\t\tsubmenu: [\n\t\t\t{\n\t\t\t\tlabel: 'World',\n\t\t\t\tclick: () =\u003e console.log('Hello World'),\n\t\t\t\taccelerator: 'CmdOrCtrl+H'\n\t\t\t}\n\t\t]\n\t},\n\t{ type: 'separator' },\n\t{\n\t\trole: 'quit',\n\t\taccelerator: 'Alt+F4'\n\t}\n];\n\nclass App extends React.Component {\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.electronbarMount = React.createRef();\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.electronbar = new Electronbar({\n\t\t\telectron: electronRemote, // for v1: electron\n\t\t\twindow: electronRemote.getCurrentWindow(), // for v1: electron.remote.getCurrentWindow()\n\t\t\tmenu: electronRemote.Menu.buildFromTemplate(menuTemplate), // for v1: electron.remote.Menu.buildFromTemplate(menuTemplate)\n\t\t\tmountNode: this.electronbarMount.current,\n\t\t\ttitle: 'Hello World',\n\t\t\ticon: 'public/imgs/favicon.ico'\n\t\t});\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003cdiv ref={this.electronbarMount} /\u003e\n\t\t\t\t\u003cdiv\u003eHello World\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t);\n\t}\n}\n```\n\n## Methods\n\n##### setMenu(menu)\n\nCall this with an Electron menu object. Make sure to use the object and not the template (`electron.remote.Menu.buildFromTemplate()` for example).\n\n##### setTitle(title)\n\nCall this with a title string to set the titlebar's title.\n\n##### setIcon(path)\n\nCall this with a path to an icon to set the titlebar's icon.\n\n## Customizing\n\nThis package offers almost no customization via JS in the library integration. Rather it's encouraged that you modify the CSS directly so that you have a completely uniform look and feel in your app. This library is really small and very straightforward. Just open the eletronbar.css to see what classes are available and override them in your own custom CSS.\n\n## Performance\n\nThe Electron menu is a bit slow to read from, lots of properties, and accessing getters is very slow, so much so, that there is actually noticeable lag when using the Electron Menu.buidlFromTempalte() as the menu source.  If you have tried alternatives, this package may be faster.  It builds a lightweight version of the Electron Menu that it uses as it's underlying source.\n\n## Dependencies\n\nElectronbar is lightweight. It has two dependencies:\n- react\n- reacton-dom\n\n## TODO\nAlthough the basic use case of a single window for Windows is implemented, the folling improvements should be made:\n- support for mac and linux\n- support for additional roles (add Electron.Menu roles in the role map)\n- support for additional OS accelerator translations (add supported Electron.Menu accelerators to the accelerator map)\n- move icons out of code and into CSS so customization is easier\n- add more Electron event handlers to fully support all Eletron window events\n- aria support for menu items\n- alt support for menu tooltips\n\n## Contributing\nFeel free to make changes and submit pull requests whenever.\n\n## License\nElectronbar uses the [MIT](https://opensource.org/licenses/MIT) license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobsius%2Felectronbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobsius%2Felectronbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobsius%2Felectronbar/lists"}