Custom React hook `useContextMenu` provides to create a menu context menus in Electron-based apps. Inspired by `react-electron-contextmenu` - https://github.com/johot/react-electron-contextmenu

App.js

import React from 'react';
import useContextMenu from './useContextMenu';

const App = () => {
  const items = React.useMemo(
    () => [
      {
        label: 'Item 1',
        click: () => {
          console.log('clicked item 1');
        },
      },
      {
        type: 'separator',
      },
      {
        label: 'Item 2',
        click: () => {
          console.log('clicked item 2');
        },
      },
    ],
    [],
  );
  const [ref] = useContextMenu(items);
  return (
    <div>
      <div ref={ref}>
        context menu area
      </div>
      <button>Simple button</button>
    </div>
  );
}

export defaul App;

use-context-menu.js

import React from 'react';
import { MenuItemConstructorOptions, remote } from 'electron';
import { findDOMNode } from 'react-dom';

const { Menu, MenuItem } = remote;

function useContextMenu(items[]) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const menu = new Menu();
    items.map(item => menu.append(new MenuItem(item)));

    const domNode = findDOMNode(ref.current);

    const listener = e => {
      e.preventDefault();
      menu.popup();
    };

    if (domNode) {
      domNode.addEventListener('contextmenu', listener);
      return () => {
        domNode.removeEventListener('contextmenu', listener);
      };
    }
  }, [ref]);

  return [ref];
}

export default useContextMenu;