- Notifications
You must be signed in to change notification settings - Fork0
Customizable Electron Titlebar for frameless windows
License
cafercangundogdu/frameless-titlebar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Customizable titlebar for frameless electron windows built with React
The demo application can be found in theexample folder along with more images of the different titlebar styles:
- Overflow Menu: When menu buttons don't fit in the given titlebar space items are moved into an overflowed submenu.
- Stacked Menu: Titlebar stacked above menu bar.
- Vertical Menu: All menu items moved into a vertical submenu.
npm install --save @cafercangundogdu/frameless-titlebar# oryarn add @cafercangundogdu/frameless-titlebarElectron Browser SetUp
mainWindow=newBrowserWindow({width:1024,height:728,minWidth:600,// set a min width!minHeight:300,// and a min height!// Remove the window frame from windows applicationsframe:false,// Hide the titlebar from MacOS applications while keeping the stop lightstitleBarStyle:'hidden',})
React App SetUp
importReactfrom'react'importiconfrom'path/to/icon.png'importmenufrom'path/to/menu'import{remote}from'electron'importTitleBarfrom'@cafercangundogdu/frameless-titlebar'constcurrentWindow=remote.getCurrentWindow()constExample=()=>{// manage window state, default to currentWindow maximized stateconst[maximized,setMaximized]=useState(currentWindow.isMaximized())// add window listeners for currentWindowuseEffect(()=>{constonMaximized=()=>setMaximized(true)constonRestore=()=>setMaximized(false)currentWindow.on('maximize',onMaximized)currentWindow.on('unmaximize',onRestore)return()=>{currentWindow.removeListener('maximize',onMaximized)currentWindow.removeListener('unmaximize',onRestore)}},[])// used by double click on the titlebar// and by the maximize control buttonconsthandleMaximize=()=>{if(maximized){currentWindow.restore()}else{currentWindow.maximize()}}return(<div><TitleBariconSrc={icon}// app iconcurrentWindow={currentWindow}// electron window instanceplatform={process.platform}// win32, darwin, linuxmenu={menu}theme={{// any theme overrides specific// to your application :)}}title='frameless app'onClose={()=>currentWindow.close()}onMinimize={()=>currentWindow.minimize()}onMaximize={handleMaximize}// when the titlebar is double clickedonDoubleClick={handleMaximize}// hide minimize windows controldisableMinimize={false}// hide maximize windows controldisableMaximize={false}// is the current window maximized?maximized={maximized}>{/* custom titlebar items */}</TitleBar></div>)}
Example of all of the overridable theme properties can be found in the example folderhere
Use titlebar theme in children
import{useContext}from'react';import{TitlebarThemeContext}from'@cafercangundogdu/frameless-titlebar';constCustomItem=()=>{// access all of the current theme properties in this// child componentconsttheme=useContext(TitlebarThemeContext);return(<divstyle={{height:theme.bar.height}}>{/* ... */}</div>)}constApp=()=>{return(<div><TitleBar><CustomItem></TitleBar></div> )}
Example of a custom TitleBarButton can be seenhere
Supported menu item properties from:Electron Menu Object/Template Documentation
| Name | Type | Description |
|---|---|---|
id (optional) | string | Must be unique. If defined then it can be used as a reference to this item by the position attribute |
type (optional) | oneOf([normal,separator,submenu,checkbox,radio]) | Type of supported menu items |
label (optional) | string | Menu item label |
click (optional) | function(menuItem, browserWindow, event) | ifcurrentWindow is not passed in to the titlebar then,browserWindow will be null |
disabled (optional) | bool | Enables/disables menu item from being clicked on |
accelerator (optional) | string | Accelerator string egCmdOrCtrl+Z |
icon (optional) | img | The image shown to the left of the menu label |
checked (optional) | bool | Should only be specified for checkbox or radio type menu items |
submenu (optional) | array : [MenuItems] | Array of menu items. Ifsubmenu is specified, thetype: 'submenu' can be omitted. |
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 |
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 |
Opening Menu: PressingAlt Key + First letter of any of the visible menu items. eg:Alt+F would open the first menu item with anF if any, such asFile.
Closing Menu: PressingEsc.
Navigating Submenus: Use arrow keys (up, down, left, right) to navigate menus once they're open.
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
Feel free to fork and create pull requests! I'll try my best to review any code changes for the next release.
MIT ©Cristian006
About
Customizable Electron Titlebar for frameless windows
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Languages
- TypeScript76.4%
- JavaScript17.7%
- CSS5.5%
- HTML0.4%