Enhance use key event

src/hooks/__tests__/useKeyEvent.jest.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { renderHook, cleanup, act, waitFor } from "@testing-library/react-hooks";
 import { fireEvent } from "@testing-library/react";
 import useKeyEvent from "../useKeyEvent";
@@ -56,6 +55,135 @@ describe("useKeyEvent", () => {
     });
   });
 
+  describe("single key with ALT modifier", () => {
+    const keys = ["Enter"];
+    beforeEach(() => {
+      callbackStub = jest.fn();
+      element = document.createElement("div");
+      document.body.appendChild(element);
+      renderHook(() =>
+        useKeyEvent({
+          keys,
+          keyEventName: "keyup",
+          ref: { current: element },
+          callback: callbackStub,
+          modifier: useKeyEvent.modifiers.ALT
+        })
+      );
+    });
+
+    afterEach(() => {
+      element.remove();
+      cleanup();
+    });
+
+    it(`should call the callback with the ${keys[0]} key and ALT key`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0],
+          altKey: true
+        });
+      });
+      expect(callbackStub.mock.calls.length).toEqual(1);
+    });
+
+    it(`should not call the callback with the key but without modifiers`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0]
+        });
+      });
+
+      expect(callbackStub.mock.calls.length).toEqual(0);
+    });
+
+    it(`should not call the callback with the key but with other modifier`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0],
+          shiftKey: true
+        });
+      });
+
+      expect(callbackStub.mock.calls.length).toEqual(0);
+    });
+  });
+
+  describe("single key with CTRL_OR_META modifier", () => {
+    const keys = ["Enter"];
+    beforeEach(() => {
+      callbackStub = jest.fn();
+      element = document.createElement("div");
+      document.body.appendChild(element);
+      renderHook(() =>
+        useKeyEvent({
+          keys,
+          keyEventName: "keyup",
+          ref: { current: element },
+          callback: callbackStub,
+          modifier: useKeyEvent.modifiers.CTRL_OR_META
+        })
+      );
+    });
+
+    afterEach(() => {
+      element.remove();
+      cleanup();
+    });
+
+    it(`should call the callback with the ${keys[0]} key and CTRL key`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0],
+          ctrlKey: true
+        });
+      });
+      expect(callbackStub.mock.calls.length).toEqual(1);
+    });
+
+    it(`should call the callback with the ${keys[0]} key and META key`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0],
+          metaKey: true
+        });
+      });
+      expect(callbackStub.mock.calls.length).toEqual(1);
+    });
+
+    it(`should not call the callback with the key but without modifiers`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0]
+        });
+      });
+
+      expect(callbackStub.mock.calls.length).toEqual(0);
+    });
+
+    it(`should not call the callback with the key but with other modifier`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: keys[0],
+          shiftKey: true
+        });
+      });
+
+      expect(callbackStub.mock.calls.length).toEqual(0);
+    });
+
+    it(`should not call the callback with other key but with modifiers`, () => {
+      act(() => {
+        fireEvent.keyUp(element, {
+          key: "Esc",
+          metaKey: true
+        });
+      });
+
+      expect(callbackStub.mock.calls.length).toEqual(0);
+    });
+  });
+
   describe("multiple keys", () => {
     const keys = ["Enter", "Esc", "Escape"];
     beforeEach(() => {

src/hooks/useKeyEvent/index.js

@@ -1,8 +1,18 @@
 import { useCallback, useRef } from "react";
 import useEventListener from "../useEventListener";
 
+const CTRL_OR_META = "ctrlOrMetaKey";
+
+const checkModifierInEvent = (event, modifier) => {
+  if (event[modifier]) return true;
+  if (modifier === CTRL_OR_META) {
+    return event.ctrlKey || event.metaKey;
+  }
+  return false;
+};
 export default function useKeyEvent({
   keys = [],
+  modifier,
   ref,
   callback,
   ignoreDocumentFallback = false,
@@ -18,6 +28,9 @@ export default function useKeyEvent({
       if (!keys.includes(key)) {
         return;
       }
+      if (modifier && !checkModifierInEvent(event, modifier)) {
+        return;
+      }
 
       if (preventDefault) {
         event.preventDefault();
@@ -29,7 +42,7 @@ export default function useKeyEvent({
 
       callback(event);
     },
-    [callback, keys, preventDefault, stopPropagation]
+    [callback, keys, preventDefault, stopPropagation, modifier]
   );
 
   let listenerRef;
@@ -49,3 +62,11 @@ export default function useKeyEvent({
     capture
   });
 }
+
+useKeyEvent.modifiers = {
+  ALT: "altKey",
+  META: "metaKey", // i.e. CMD key
+  CTRL: "ctrlKey",
+  SHIFT: "shiftKey",
+  CTRL_OR_META
+};