[IMPL] useContextMenu hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useContextMenu/UseContextMenu.tsx

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from "react"
+import { useContextMenu } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _useContextMenu_ hook and renders two paragraph. It uses the hook to disabled native contextmenu event on first paragraph.
+ */
+export const UseContextMenu = () => {
+	const pRef = useRef<HTMLParagraphElement>(null);
+	useContextMenu({
+		element: pRef,
+		listener: useCallback((evt: PointerEvent) => {
+			evt.preventDefault();
+		}, [])
+	});
+
+	return <div>
+		<p ref={pRef}>The context menu on this paragraph is disabled.</p>
+		<p>On this paragraph context menu is enabled.</p>
+	</div>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -69,7 +69,8 @@ export const COMPONENTS = [
 			"useScreen",
 			"useHotKeys",
 			"usePinchZoom",
-			"usePointerLock"
+			"usePointerLock",
+			"useContextMenu"
 		],
 		//API DOM
 		[

apps/react-tools-demo/src/markdown/useContextMenu.md

@@ -0,0 +1,50 @@
+# useContextMenu
+Hook to add contextmenu event listener. The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key.
+
+## Usage
+
+```tsx
+export const UseContextMenu = () => {
+	const pRef = useRef<HTMLParagraphElement>(null);
+	useContextMenu({
+		element: pRef,
+		listener: useCallback((evt: PointerEvent) => {
+			evt.preventDefault();
+		}, [])
+	});
+
+	return <div>
+		<p ref={pRef}>The context menu on this paragraph is disabled.</p>
+		<p>On this paragraph context menu is enabled.</p>
+	</div>
+}
+```
+
+> The component uses _useContextMenu_ hook and renders two paragraph. It uses the hook to disabled native contextmenu event on first paragraph.
+
+
+## API
+
+```tsx
+useContextMenu({ element, listener, effectType, listenerOpts }: { element: RefObject<HTMLElement> | Window, listener: (evt: PointerEvent) => void | Promise<void>, effectType?: "normal" | "layout", listenerOpts?: boolean | AddEventListenerOptions | undefined })
+```
+
+> ### Params
+>
+> - __param__: _Object_  
+props
+> - __param.listener?__: _(evt: PointerEvent)=>void|Promise<void>_  
+listener function executed when event fires.
+> - __options.element=window?__: _RefObject<HTMLElement> | Window_  
+element on which attaching eventListener.
+> - __param.effectType="normal"?__: _"normal"|"layout"_  
+props
+> - __param.listenerOpts?__: _boolean | AddEventListenerOptions_  
+props
+>
+
+> ### Returns
+>
+> 
+> 
+>

packages/react-tools/README.md

@@ -69,7 +69,7 @@
 	- [x] useHotKeys
 	- [x] usePinchZoom
 	- [x] usePointerLock
-	- [ ] useContextMenu
+	- [x] useContextMenu
 	- [ ] useInfiniteScroll
 	- [ ] useDragAndDrop (check for mobile usage)
 

packages/react-tools/src/hooks/index.ts

@@ -90,4 +90,5 @@ export { useAnimation } from './useAnimation';
 export { useAudio } from './useAudio';
 export { useVideo } from './useVideo';
 export { useEventSource } from './useEventSource';
-export { useWebSocket } from './useWebSocket';
+export { useWebSocket } from './useWebSocket';
+export { useContextMenu } from './useContextMenu';

packages/react-tools/src/hooks/useContextMenu.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react"
+import { useEventListener } from "."
+
+/**
+ * **`useContextMenu`**: Hook to add contextmenu event listener. The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key.
+ * @param {Object} param - props
+ * @param {(evt: PointerEvent)=>void|Promise<void>} [param.listener] - listener function executed when event fires.
+ * @param {RefObject<HTMLElement> | Window} [options.element=window] - element on which attaching eventListener.
+ * @param {"normal"|"layout"} [param.effectType="normal"] - props
+ * @param {boolean | AddEventListenerOptions} [param.listenerOpts] - props
+ */
+export const useContextMenu = ({ element, listener, effectType, listenerOpts }: { element: RefObject<HTMLElement> | Window, listener: (evt: PointerEvent) => void | Promise<void>, effectType?: "normal" | "layout", listenerOpts?: boolean | AddEventListenerOptions | undefined }) => {
+	useEventListener({
+		type: "contextmenu",
+		listener,
+		effectType,
+		listenerOpts,
+		element
+	})
+}

packages/react-tools/src/index.ts

@@ -163,7 +163,8 @@ export {
 	useAudio,
 	useVideo,
 	useEventSource,
-	useWebSocket
+	useWebSocket,
+	useContextMenu
 } from './hooks'
 
 export {