Dev dependencies, prop changes, and js project interoperability

package.json

@@ -1,13 +1,12 @@
 {
   "name": "react-electron-contextmenu",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Makes it super easy to create context menus in your React powered Electron apps",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build-library": "npm run clean-build && tsc && cp package.json ./dist/ && cp Readme.md ./dist/ && Echo Build completed!",
-    "publish-library": "cd ./dist && npm publish && echo Package published!",
-    "clean-build": "rm -rf dist"
+    "build": "npm run clean && tsc && cp package.json ./dist/ && cp Readme.md ./dist/ && Echo Build completed!",
+    "publish": "cd ./dist && npm publish && echo Package published!",
+    "clean": "rm -rf dist"
   },
   "repository": {
     "type": "git",
@@ -16,7 +15,17 @@
   "author": "johot",
   "license": "MIT",
   "peerDependencies": {
-    "react": "*",
-    "electron": "*"
+    "electron": "*",
+    "react": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "electron": "^11.2.0",
+    "react": "^17.0.1",
+    "typescript": "^4.1.3"
+  },
+  "dependencies": {
+    "tslib": "^2.1.0"
   }
 }

src/ContextMenuArea.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { remote } from 'electron';
+const { Menu } = remote;
+
+export interface ContextMenuAreaProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+  menuItems: Electron.MenuItemConstructorOptions[];
+}
+
+export function ContextMenuArea(props: ContextMenuAreaProps) {
+  const { menuItems, ...rest } = props;
+  const [menu, setMenu] = useState(new Menu());
+
+  useEffect(() => {
+    setMenu(Menu.buildFromTemplate(menuItems));
+  }, [menuItems]);
+
+  const contextMenuCallback = useCallback((event: React.MouseEvent) => {
+    menu?.popup();
+  }, [menu]);
+
+  return (
+    <div {...rest} onContextMenu={contextMenuCallback} >
+      {props.children}
+    </div>
+  );
+}

index.ts → src/index.ts

@@ -1,4 +1,4 @@
-import ContextMenuArea from "./context-menu-area";
+import { ContextMenuArea } from "./ContextMenuArea";
 
 export { ContextMenuArea };
 export default ContextMenuArea;

tsconfig.json

@@ -8,12 +8,14 @@
     "jsx": "react",
     "lib": ["dom", "es2015", "es2016"],
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "noEmitHelpers": true,
     "importHelpers": true,
     "strict": true,
     "noImplicitReturns": true,
     "declaration": true
   },
+  "include": ["src"],
   "exclude": ["node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts"]
 }