@reecelucas/react-use-hotkeys - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

esm/index.d.ts

 import 'shim-keyboard-event-key';
-declare const useHotkeys: (hotkeys: string, callback: (event: KeyboardEvent) => void) => void;
+declare const useHotkeys: (hotkeys: string | string[], callback: (event: KeyboardEvent) => void) => void;
 export default useHotkeys;

esm/index.js

@@ -14,21 +14,27 @@ import { useEffect, useMemo } from 'react';
 var useHotkeys = function (hotkeys, callback) {
-    var hotkeysArray = useMemo(function () { return getHotkeysArray(hotkeys); }, [hotkeys]);
+    var hotkeysArray = useMemo(function () {
+        return Array.isArray(hotkeys)
+            ? hotkeys.map(getHotkeysArray)
+            : [getHotkeysArray(hotkeys)];
+    }, [hotkeys]);
     useEffect(function () {
-        var keySequence = [];
-        var sequenceTimer;
-        var clearSequenceTimer = function () {
-            return sequenceTimer && clearTimeout(sequenceTimer);
+        var keySequences = {};
+        var sequenceTimers = {};
+        var clearSequenceTimer = function (index) {
+            clearTimeout(sequenceTimers[index]);
         };
-        var resetKeySequence = function () {
-            clearSequenceTimer();
-            keySequence = [];
+        var resetKeySequence = function (index) {
+            clearSequenceTimer(index);
+            keySequences[index] = [];
         };
-        var handleKeySequence = function (event, keys) {
-            clearSequenceTimer();
-            sequenceTimer = window.setTimeout(function () {
-                resetKeySequence();
+        var handleKeySequence = function (event, keys, index) {
+            clearSequenceTimer(index);
+            keySequences[index] = keySequences[index] || [];
+            sequenceTimers[index] = window.setTimeout(function () {
+                resetKeySequence(index);
             }, KEY_SEQUENCE_TIMEOUT);
+            var keySequence = keySequences[index];
             keySequence.push(event.key.toLowerCase());
             if (arraysAreEqual(keySequence, keys)) {
-                resetKeySequence();
+                resetKeySequence(index);
                 callback(event);
@@ -47,29 +53,33 @@ }
         var onKeydown = function (event) {
-            // chrome autocomplete triggers 'keydown' event but event.key will be
-            // undefined. See https://bugs.chromium.org/p/chromium/issues/detail?id=581537
-            if (event.key === undefined) {
+            /**
+             * Chrome autocomplete triggers `keydown` event but event.key will be undefined.
+             * See https://bugs.chromium.org/p/chromium/issues/detail?id=581537.
+             */
+            if (!event.key && !modifierKeyPressed(event)) {
                 return;
             }
-            if (hotkeysArray.length === 1 && hotkeysArray[0] === ESCAPE_HATCH_KEY) {
-                /**
-                 * Provide escape hatch should the user want to perform
-                 * some custom logic not supported by the API.
-                 */
-                callback(event);
-                return;
-            }
-            // Handle modifier key combos
-            if (modifierKeyPressed(event)) {
-                handleModifierCombo(event, hotkeysArray);
-                return;
-            }
-            // Handle key sequences
-            if (hotkeysArray.length > 1 && !modifierKeyPressed(event)) {
-                handleKeySequence(event, hotkeysArray);
-                return;
-            }
-            // Handle the basic case: a single hotkey
-            if (event.key.toLowerCase() === hotkeysArray[0]) {
-                callback(event);
-            }
+            hotkeysArray.forEach(function (keysArray, i) {
+                if (keysArray.length === 1 && keysArray[0] === ESCAPE_HATCH_KEY) {
+                    /**
+                     * Provide escape hatch should the user want to perform
+                     * some custom logic not supported by the API.
+                     */
+                    callback(event);
+                    return;
+                }
+                // Handle modifier key combos
+                if (modifierKeyPressed(event)) {
+                    handleModifierCombo(event, keysArray);
+                    return;
+                }
+                // Handle key sequences
+                if (keysArray.length > 1 && !modifierKeyPressed(event)) {
+                    handleKeySequence(event, keysArray, i);
+                    return;
+                }
+                // Handle the basic case; a single hotkey
+                if (event.key.toLowerCase() === keysArray[0]) {
+                    callback(event);
+                }
+            });
         };
@@ -76,0 +86,0 @@ window.addEventListener('keydown', onKeydown);

lib/index.d.ts

 import 'shim-keyboard-event-key';
-declare const useHotkeys: (hotkeys: string, callback: (event: KeyboardEvent) => void) => void;
+declare const useHotkeys: (hotkeys: string | string[], callback: (event: KeyboardEvent) => void) => void;
 export default useHotkeys;

lib/index.js

@@ -16,21 +16,27 @@ "use strict";
 var useHotkeys = function (hotkeys, callback) {
-    var hotkeysArray = react_1.useMemo(function () { return getHotkeysArray_1.default(hotkeys); }, [hotkeys]);
+    var hotkeysArray = react_1.useMemo(function () {
+        return Array.isArray(hotkeys)
+            ? hotkeys.map(getHotkeysArray_1.default)
+            : [getHotkeysArray_1.default(hotkeys)];
+    }, [hotkeys]);
     react_1.useEffect(function () {
-        var keySequence = [];
-        var sequenceTimer;
-        var clearSequenceTimer = function () {
-            return sequenceTimer && clearTimeout(sequenceTimer);
+        var keySequences = {};
+        var sequenceTimers = {};
+        var clearSequenceTimer = function (index) {
+            clearTimeout(sequenceTimers[index]);
         };
-        var resetKeySequence = function () {
-            clearSequenceTimer();
-            keySequence = [];
+        var resetKeySequence = function (index) {
+            clearSequenceTimer(index);
+            keySequences[index] = [];
         };
-        var handleKeySequence = function (event, keys) {
-            clearSequenceTimer();
-            sequenceTimer = window.setTimeout(function () {
-                resetKeySequence();
+        var handleKeySequence = function (event, keys, index) {
+            clearSequenceTimer(index);
+            keySequences[index] = keySequences[index] || [];
+            sequenceTimers[index] = window.setTimeout(function () {
+                resetKeySequence(index);
             }, KEY_SEQUENCE_TIMEOUT);
+            var keySequence = keySequences[index];
             keySequence.push(event.key.toLowerCase());
             if (arraysAreEqual_1.default(keySequence, keys)) {
-                resetKeySequence();
+                resetKeySequence(index);
                 callback(event);
@@ -49,29 +55,33 @@ }
         var onKeydown = function (event) {
-            // chrome autocomplete triggers 'keydown' event but event.key will be
-            // undefined. See https://bugs.chromium.org/p/chromium/issues/detail?id=581537
-            if (event.key === undefined) {
+            /**
+             * Chrome autocomplete triggers `keydown` event but event.key will be undefined.
+             * See https://bugs.chromium.org/p/chromium/issues/detail?id=581537.
+             */
+            if (!event.key && !modifierKeyPressed_1.default(event)) {
                 return;
             }
-            if (hotkeysArray.length === 1 && hotkeysArray[0] === ESCAPE_HATCH_KEY) {
-                /**
-                 * Provide escape hatch should the user want to perform
-                 * some custom logic not supported by the API.
-                 */
-                callback(event);
-                return;
-            }
-            // Handle modifier key combos
-            if (modifierKeyPressed_1.default(event)) {
-                handleModifierCombo(event, hotkeysArray);
-                return;
-            }
-            // Handle key sequences
-            if (hotkeysArray.length > 1 && !modifierKeyPressed_1.default(event)) {
-                handleKeySequence(event, hotkeysArray);
-                return;
-            }
-            // Handle the basic case: a single hotkey
-            if (event.key.toLowerCase() === hotkeysArray[0]) {
-                callback(event);
-            }
+            hotkeysArray.forEach(function (keysArray, i) {
+                if (keysArray.length === 1 && keysArray[0] === ESCAPE_HATCH_KEY) {
+                    /**
+                     * Provide escape hatch should the user want to perform
+                     * some custom logic not supported by the API.
+                     */
+                    callback(event);
+                    return;
+                }
+                // Handle modifier key combos
+                if (modifierKeyPressed_1.default(event)) {
+                    handleModifierCombo(event, keysArray);
+                    return;
+                }
+                // Handle key sequences
+                if (keysArray.length > 1 && !modifierKeyPressed_1.default(event)) {
+                    handleKeySequence(event, keysArray, i);
+                    return;
+                }
+                // Handle the basic case; a single hotkey
+                if (event.key.toLowerCase() === keysArray[0]) {
+                    callback(event);
+                }
+            });
         };
@@ -78,0 +88,0 @@ window.addEventListener('keydown', onKeydown);

package.json

 {
   "name": "@reecelucas/react-use-hotkeys",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React hook to create keyboard shortcuts",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -47,5 +47,14 @@ # react-use-hotkeys
 });
+
+// Multiple key combinations mapped to the same callback
+useHotkeys(['Control+z', 'Meta+z'], () => {
+  console.log('some action');
+});
+
+useHotkeys(['a', 'Meta+z', 'w s d'], () => {
+  console.log('some action');
+});
 ```
 
-The following patterns are **not** supported (yet):
+The following patterns are **not** supported:
 
@@ -62,7 +71,2 @@ ```jsx
 });
-
-// Multiple combinations mapped to the same callback
-useHotkeys(['Control+z', 'Meta+z'], () => {
-  console.log("I won't run!");
-});
 ```
@@ -85,3 +89,3 @@
 ```ts
-useHotkeys(hotkeys: string, callback: (event: KeyboardEvent) => void);
+useHotkeys(hotkeys: string | string[], callback: (event: KeyboardEvent) => void);
 ```
@@ -88,0 +92,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21240

increased by5.08%

Lines of code

394

increased by5.35%

Number of lines in readme file

104

increased by4%

No dependency changes