{"id":26712341,"url":"https://github.com/cristian006/frameless-titlebar","last_synced_at":"2025-04-05T06:10:43.837Z","repository":{"id":33786602,"uuid":"133889762","full_name":"Cristian006/frameless-titlebar","owner":"Cristian006","description":"Customizable Electron Titlebar for frameless windows","archived":false,"fork":false,"pushed_at":"2023-01-06T01:59:16.000Z","size":9002,"stargazers_count":216,"open_issues_count":51,"forks_count":35,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-27T11:24:43.058Z","etag":null,"topics":["custom","custom-titlebar","customizable","desktop","desktop-app","desktop-application","electron","electron-titlebar","frameless","frameless-windows","macos","menubar","react","submenu","themable","titlebar","toolbar","typescript","windows"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/frameless-titlebar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cristian006.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-18T01:59:18.000Z","updated_at":"2025-02-20T19:47:51.000Z","dependencies_parsed_at":"2023-01-15T02:45:33.553Z","dependency_job_id":null,"html_url":"https://github.com/Cristian006/frameless-titlebar","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cristian006%2Fframeless-titlebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cristian006%2Fframeless-titlebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cristian006%2Fframeless-titlebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cristian006%2Fframeless-titlebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cristian006","download_url":"https://codeload.github.com/Cristian006/frameless-titlebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294541,"owners_count":20915340,"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","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","custom-titlebar","customizable","desktop","desktop-app","desktop-application","electron","electron-titlebar","frameless","frameless-windows","macos","menubar","react","submenu","themable","titlebar","toolbar","typescript","windows"],"created_at":"2025-03-27T11:24:01.968Z","updated_at":"2025-04-05T06:10:43.807Z","avatar_url":"https://github.com/Cristian006.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frameless-titlebar\n\n[![NPM](https://img.shields.io/npm/v/frameless-titlebar.svg)](https://www.npmjs.com/package/frameless-titlebar) ![Build and Deploy](https://github.com/Cristian006/frameless-titlebar/workflows/Build%20and%20Deploy/badge.svg) ![NPM](https://img.shields.io/npm/l/frameless-titlebar)\n\n\u003e Customizable titlebar for frameless electron windows built with React\n\n![Main][main]\n\n## [Demo App](https://cristian006.github.io/frameless-titlebar)\n\nThe demo application can be found in the [example](./example) folder along with more images of the different titlebar styles:\n\n* [Overflow Menu](./example/public/overflow.jpg): When menu buttons don't fit in the given titlebar space items are moved into an overflowed submenu.\n* [Stacked Menu](./example/public/stacked.png): Titlebar stacked above menu bar.\n* [Vertical Menu](./example/public/vertical.png): All menu items moved into a vertical submenu.\n\n## Install\n\n```bash\nnpm install --save frameless-titlebar\n# or\nyarn add frameless-titlebar\n```\n\n## Usage\n\nElectron Browser SetUp\n\n```js\nmainWindow = new BrowserWindow({\n  width: 1024,\n  height: 728,\n  minWidth: 600, // set a min width!\n  minHeight: 300, // and a min height!\n  // Remove the window frame from windows applications\n  frame: false,\n  // Hide the titlebar from MacOS applications while keeping the stop lights\n  titleBarStyle: 'hidden',\n});\n```\n\nReact App SetUp\n\n```jsx\nimport React from 'react'\nimport icon from 'path/to/icon.png';\nimport menu from 'path/to/menu';\nimport { remote } from 'electron';\n\nimport TitleBar from 'frameless-titlebar'\n\nconst currentWindow = remote.getCurrentWindow();\n\nconst Example = () =\u003e {\n  // manage window state, default to currentWindow maximized state\n  const [maximized, setMaximized] = useState(currentWindow.isMaximized());\n  // add window listeners for currentWindow\n  useEffect(() =\u003e {\n    const onMaximized = () =\u003e setMaximized(true);\n    const onRestore = () =\u003e setMaximized(false);\n    currentWindow.on(\"maximize\", onMaximized);\n    currentWindow.on(\"unmaximize\", onRestore);\n    return () =\u003e {\n      currentWindow.removeListener(\"maximize\", onMaximized);\n      currentWindow.removeListener(\"unmaximize\", onRestore);\n    }\n  }, []);\n\n  // used by double click on the titlebar\n  // and by the maximize control button\n  const handleMaximize = () =\u003e {\n    if (maximized) {\n      currentWindow.restore();\n    } else {\n      currentWindow.maximize();\n    }\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cTitleBar\n        iconSrc={icon} // app icon\n        currentWindow={currentWindow} // electron window instance\n        platform={process.platform} // win32, darwin, linux\n        menu={menu}\n        theme={{\n          // any theme overrides specific\n          // to your application :)\n        }}\n        title=\"frameless app\"\n        onClose={() =\u003e currentWindow.close()}\n        onMinimize={() =\u003e currentWindow.minimize()}\n        onMaximize={handleMaximize}\n        // when the titlebar is double clicked\n        onDoubleClick={handleMaximize}\n        // hide minimize windows control\n        disableMinimize={false}\n        // hide maximize windows control\n        disableMaximize={false}\n        // is the current window maximized?\n        maximized={maximized}\n      \u003e\n        {/* custom titlebar items */}\n      \u003c/TitleBar\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\u003e Example of all of the overridable theme properties can be found in the example folder [here](./example/README.md)\n\nUse titlebar theme in children\n\n```jsx\nimport { useContext } from 'react';\nimport { TitlebarThemeContext } from 'frameless-titlebar';\n\nconst CustomItem = () =\u003e {\n  // access all of the current theme properties in this\n  // child component\n  const theme = useContext(TitlebarThemeContext);\n  return (\n    \u003cdiv style={{ height: theme.bar.height }}\u003e\n      {/* ... */}\n    \u003c/div\u003e\n  )\n}\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cTitleBar\u003e\n        \u003cCustomItem\u003e\n      \u003c/TitleBar\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\n\u003e Example of a custom TitleBarButton can be seen [here](./example/src/components.js)\n\n## Supported Menu Item Properties\n\nSupported menu item properties from:\n[Electron Menu Object/Template Documentation](https://electronjs.org/docs/api/menu \"Electron Menu Documentation\")\n\n| Name | Type | Description |\n| :--- | :--: | :---------- |\n| `id` (optional) | `string` | Must be unique. If defined then it can be used as a reference to this item by the position attribute |\n| `type` (optional) | oneOf([`normal`, `separator`, `submenu`, `checkbox`, `radio`]) | Type of supported menu items |\n| `label` (optional) | `string` | Menu item label |\n| `click` (optional) | `function(menuItem, browserWindow, event)` | if `currentWindow` is not passed in to the titlebar then, `browserWindow` will be null |\n| `disabled` (optional) | `bool` | Enables/disables menu item from being clicked on |\n| `accelerator` (optional) | `string` | Accelerator string eg `CmdOrCtrl+Z`|\n| `icon` (optional) | `img` | The image shown to the left of the menu label |\n| `checked` (optional) | `bool` | Should only be specified for checkbox or radio type menu items |\n| `submenu` (optional) | `array : [MenuItems]` | Array of menu items. If `submenu` is specified, the `type: 'submenu'` can be omitted. |\n| `before` (optional) | `string` | Inserts this item before the item with the specified id. If the referenced item doesn't exist the item will be inserted at the end of the menu |\n| `after` (optional) | `string` | Inserts this item after the item with the specified id. If the referenced item doesn't exist the item will be inserted at the end of the menu |\n\n## Keyboard accessibility\n\n**Opening Menu**: Pressing `Alt` Key + First letter of any of the visible menu items. eg: `Alt+F` would open the first menu item with an `F` if any, such as `File`.\n\n**Closing Menu**: Pressing `Esc`.\n\n**Navigating Submenus**: Use arrow keys (up, down, left, right) to navigate menus once they're open.\n\n## Disclaimers\n\n**NOTE**: `^v2.0.0` has a lot of breaking changes from the previous `^1.x.x` releases since this was a complete re-write of frameless-titlebar\n\n## Contributing\n\nFeel free to fork and create pull requests! I'll try my best to review any code changes for the next release.\n\n## Links\n\n[Electron Remote Docs](https://www.electronjs.org/docs/api/remote#remotegetcurrentwindow)\n\n[Electron Menu Docs](https://electronjs.org/docs/api/menu \"Electron Menu Documentation\")\n\n## License\n\nMIT © [Cristian006](https://github.com/Cristian006)\n\n---\n\n\u003cdiv style=\"text-align: center\"\u003e\nMade with ❤️ + ☕ by \u003ca href=\"http://crispcrafts.com\"\u003eCristian Ponce\u003c/a\u003e\n\u003c/div\u003e\n\n[main]: ./example/public/default.png \"Main\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristian006%2Fframeless-titlebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcristian006%2Fframeless-titlebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristian006%2Fframeless-titlebar/lists"}