react-electron-window-menu
Install
$ npm i react-electron-window-menu
MenuBar
View Demo : https://codesandbox.io/s/qlz936p539
import * as React from 'react';
import { MenuBar, IREWMenu } from 'react-electron-window-menu';
import 'react-electron-window-menu/style.scss';
import { styled } from 'styledComponents';
import { Icon } from 'antd';
const Container = 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;
}
`;
interface IProps {}
interface IState {}
class MenuBarExample extends React.Component<IProps, IState> {
state = {};
constructor(props: IProps) {
super(props);
}
onClickMenu: IREWMenu.OnClickItem = (menuItem, w, e) => {
console.log(menuItem);
};
render() {
return (
<Container>
<div className="menubar-container">
<MenuBar
style={{ height: '25px' }}
submenu={{
style: { minWidth: '150px' },
placement: 'bottom',
}}
items={[
{
label: 'File',
submenu: [
{
label: 'Back (enabled: false)',
icon: <Icon type="arrow-left" />,
click: this.onClickMenu,
enabled: false,
},
{
label: 'Forward',
icon: <Icon type="arrow-right" />,
click: this.onClickMenu,
accelerator: 'Cmd+F',
},
{
label: 'Reload',
icon: <Icon type="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: <Icon type="github" />,
click: this.onClickMenu,
},
{
label: 'Gitlab',
icon: <Icon type="gitlab" />,
click: this.onClickMenu,
},
{
label: 'Twitter',
icon: <Icon type="twitter" />,
click: this.onClickMenu,
},
{
label: 'Facebook',
icon: <Icon type="facebook" />,
click: this.onClickMenu,
},
{
label: 'Google+',
icon: <Icon type="google-plus" />,
click: this.onClickMenu,
visible: false,
},
{
label: 'Slack (enabled: false)',
icon: <Icon type="slack-square" />,
click: this.onClickMenu,
enabled: false,
},
{
label: 'Email',
icon: <Icon type="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>
);
}
}
export default MenuBarExample;ContextMenu
View Demo : https://codesandbox.io/s/9j6m3ojo3o
import * as React from 'react';
import { ContextMenu, IREWMenu } from 'react-electron-window-menu';
import 'react-electron-window-menu/style.scss';
import { styled } from 'styledComponents';
import { Icon } from 'antd';
const Container = styled.div`
height: 300px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
`;
interface IProps {}
interface IState {}
class ContextMenuExample extends React.Component<IProps, IState> {
menu: IREWMenu.IContextMenu;
state = {};
constructor(props: IProps) {
super(props);
this.menu = new ContextMenu({
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 (
<Container onContextMenu={this.handleContextMenu}>
Right mouse click here
</Container>
);
}
componentDidMount() {
this.menu.setMenu([
{
label: 'Back (enabled: false)',
icon: <Icon type="arrow-left" />,
click: this.onClickMenu,
enabled: false,
},
{
label: 'Forward',
icon: <Icon type="arrow-right" />,
click: this.onClickMenu,
accelerator: 'Cmd+F',
},
{
label: 'Reload',
icon: <Icon type="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: <Icon type="github" />,
click: this.onClickMenu,
},
{
label: 'Gitlab',
icon: <Icon type="gitlab" />,
click: this.onClickMenu,
},
{
label: 'Twitter',
icon: <Icon type="twitter" />,
click: this.onClickMenu,
},
{
label: 'Facebook',
icon: <Icon type="facebook" />,
click: this.onClickMenu,
},
{
label: 'Google+',
icon: <Icon type="google-plus" />,
click: this.onClickMenu,
visible: false,
},
{
label: 'Slack (enabled: false)',
icon: <Icon type="slack-square" />,
click: this.onClickMenu,
enabled: false,
},
{
label: 'Email',
icon: <Icon type="mail" />,
click: this.onClickMenu,
},
],
},
{ type: 'separator' },
{ label: 'View Source', click: this.onClickMenu },
{ label: 'Save', click: this.onClickMenu },
]);
}
}
export default ContextMenuExample;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