react-electron-window-menu

Install

$ npm i react-electron-window-menu

MenuBar

View Demo : https://codesandbox.io/s/qlz936p539

import*asReactfrom'react';import{MenuBar,IREWMenu}from'react-electron-window-menu';import'react-electron-window-menu/style.scss';import{styled}from'styledComponents';import{Icon}from'antd';constContainer=styled.div` height: 200px; background: #467bff; padding: 10px; overflow: auto; .menubar-container { padding: 0 10px; height: 25px; background: #eee; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); font-size: 12px; }`;interfaceIProps{}interfaceIState{}classMenuBarExampleextendsReact.Component<IProps,IState>{
state ={};constructor(props: IProps){super(props);}onClickMenu: IREWMenu.OnClickItem=(menuItem,w,e)=>{console.log(menuItem);};render(){return(<Container><divclassName="menubar-container"><MenuBarstyle={{height: '25px'}}submenu={{style: {minWidth: '150px'},placement: 'bottom',}}items={[{label: 'File',submenu: [{label: 'Back (enabled: false)',icon: <Icontype="arrow-left"/>,click: this.onClickMenu,enabled: false,},{label: 'Forward',icon: <Icontype="arrow-right"/>,click: this.onClickMenu,accelerator: 'Cmd+F',},{label: 'Reload',icon: <Icontype="caret-right"/>,click: this.onClickMenu,},{type: 'separator'},{label: 'Save as',click: this.onClickMenu,visible: false},{label: 'Print (enabled: false)',click: this.onClickMenu,enabled: false,},{type: 'checkbox',label: 'Action option 1',click: (menuItem,w,e)=>{console.log(menuItem);},},{type: 'checkbox',label: 'Action option 2 (enabled: false)',checked: true,enabled: false,click: (menuItem,w,e)=>{console.log(menuItem);},},{label: 'send to...',submenu: [{label: 'Github',icon: <Icontype="github"/>,click: this.onClickMenu,},{label: 'Gitlab',icon: <Icontype="gitlab"/>,click: this.onClickMenu,},{label: 'Twitter',icon: <Icontype="twitter"/>,click: this.onClickMenu,},{label: 'Facebook',icon: <Icontype="facebook"/>,click: this.onClickMenu,},{label: 'Google+',icon: <Icontype="google-plus"/>,click: this.onClickMenu,visible: false,},{label: 'Slack (enabled: false)',icon: <Icontype="slack-square"/>,click: this.onClickMenu,enabled: false,},{label: 'Email',icon: <Icontype="mail"/>,click: this.onClickMenu,},],},{type: 'separator'},{label: 'View Source',click: this.onClickMenu},{label: 'Save',click: this.onClickMenu},],},{label: 'Edit',submenu: [{label: 'Undo',accelerator: 'Cmd+Z',click: this.onClickMenu,},{label: 'Redo',accelerator: 'Cmd++Shift+Z',click: this.onClickMenu,},],},{label: 'Selection',submenu: [{label: 'Select All',click: this.onClickMenu,},],},]}/></div></Container>);}}exportdefaultMenuBarExample;

ContextMenu

View Demo : https://codesandbox.io/s/9j6m3ojo3o

import*asReactfrom'react';import{ContextMenu,IREWMenu}from'react-electron-window-menu';import'react-electron-window-menu/style.scss';import{styled}from'styledComponents';import{Icon}from'antd';constContainer=styled.div` height: 300px; background: #eee; display: flex; justify-content: center; align-items: center;`;interfaceIProps{}interfaceIState{}classContextMenuExampleextendsReact.Component<IProps,IState>{menu: IREWMenu.IContextMenu;state={};constructor(props: IProps){super(props);this.menu=newContextMenu({id: 'basic',style: {fontSize: '14px',minWidth: '200px'},});}onClickMenu: IREWMenu.OnClickItem=(menuItem,w,e)=>{console.log(menuItem);};handleContextMenu=(e: React.MouseEvent<HTMLDivElement>)=>{e.preventDefault();this.menu.popup({x: e.pageX,y: e.pageY});};render(){return(<ContaineronContextMenu={this.handleContextMenu}>
Right mouse click here
</Container>);}componentDidMount(){this.menu.setMenu([{label: 'Back (enabled: false)',icon: <Icontype="arrow-left"/>,click: this.onClickMenu,enabled: false,},{label: 'Forward',icon: <Icontype="arrow-right"/>,click: this.onClickMenu,accelerator: 'Cmd+F',},{label: 'Reload',icon: <Icontype="caret-right"/>,click: this.onClickMenu,},{type: 'separator'},{label: 'Save as',click: this.onClickMenu,visible: false},{label: 'Print (enabled: false)',click: this.onClickMenu,enabled: false,},{type: 'checkbox',label: 'Action option 1',click: (menuItem,w,e)=>{console.log(menuItem);},},{type: 'checkbox',label: 'Action option 2 (enabled: false)',checked: true,enabled: false,click: (menuItem,w,e)=>{console.log(menuItem);},},{label: 'send to...',submenu: [{label: 'Github',icon: <Icontype="github"/>,click: this.onClickMenu,},{label: 'Gitlab',icon: <Icontype="gitlab"/>,click: this.onClickMenu,},{label: 'Twitter',icon: <Icontype="twitter"/>,click: this.onClickMenu,},{label: 'Facebook',icon: <Icontype="facebook"/>,click: this.onClickMenu,},{label: 'Google+',icon: <Icontype="google-plus"/>,click: this.onClickMenu,visible: false,},{label: 'Slack (enabled: false)',icon: <Icontype="slack-square"/>,click: this.onClickMenu,enabled: false,},{label: 'Email',icon: <Icontype="mail"/>,click: this.onClickMenu,},],},{type: 'separator'},{label: 'View Source',click: this.onClickMenu},{label: 'Save',click: this.onClickMenu},]);}}exportdefaultContextMenuExample;

Version history

• v0.2.0 : Implement submenu
• v0.3.0 : Add properties "check, enable, visible" on MenuItem
• v0.3.1 : update readme
• v0.4.0 : Add property "accelerator" on MenuItem
• v0.5.1 : Rename to react-electron-window-menu
• v0.6.1 : Update dependencies