diff --git a/context-menu-area.tsx b/context-menu-area.tsx
deleted file mode 100644
index 9f69c25..0000000
--- a/context-menu-area.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React = require("react");
-import { remote } from "electron";
-const { Menu } = remote;
-
-export interface ContextMenuAreaProps {
-  menuItems: Electron.MenuItemConstructorOptions[];
-  style?: any;
-}
-
-export class ContextMenuArea extends React.Component<ContextMenuAreaProps> {
-  private _menu = new Menu();
-  private _rootElement: HTMLDivElement | null = null;
-
-  componentDidMount() {
-    this._menu = Menu.buildFromTemplate(this.props.menuItems);
-
-    this._rootElement!.addEventListener(
-      "contextmenu",
-      e => {
-        e.preventDefault();
-        //self._rightClickPosition = { x: e.x, y: e.y };
-        this._menu.popup(remote.getCurrentWindow());
-      },
-      false
-    );
-  }
-
-  render() {
-    return (
-      <div style={{ ...this.props.style }} ref={ref => (this._rootElement = ref)}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-export default ContextMenuArea;
diff --git a/package.json b/package.json
index c3a7900..df3e92c 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/ContextMenuArea.tsx b/src/ContextMenuArea.tsx
new file mode 100644
index 0000000..555d65e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/index.ts b/src/index.ts
similarity index 53%
rename from index.ts
rename to src/index.ts
index ffc4215..f5beddc 100644
--- a/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import ContextMenuArea from "./context-menu-area";
+import { ContextMenuArea } from "./ContextMenuArea";
 
 export { ContextMenuArea };
 export default ContextMenuArea;
diff --git a/tsconfig.json b/tsconfig.json
index 45c8fdb..30a43cd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
     "jsx": "react",
     "lib": ["dom", "es2015", "es2016"],
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "noEmitHelpers": true,
     "importHelpers": true,
@@ -15,5 +16,6 @@
     "noImplicitReturns": true,
     "declaration": true
   },
+  "include": ["src"],
   "exclude": ["node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts"]
 }