react-hotkeys-hook - npm Package Compare versions

Comparing version 4.5.0 to 4.5.1

dist/parseHotkeys.d.ts

 import { Hotkey } from './types';
-export declare function mapKey(key: string): string;
+export declare function mapKey(key?: string): string;
 export declare function isHotkeyModifier(key: string): boolean;
 export declare function parseKeysHookInput(keys: string, splitKey?: string): string[];
 export declare function parseHotkey(hotkey: string, combinationKey?: string, description?: string): Hotkey;

dist/react-hotkeys-hook.cjs.development.js

@@ -7,14 +7,9 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
@@ -45,3 +40,3 @@
 function mapKey(key) {
-  return (mappedKeys[key] || key).trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
+  return (key && mappedKeys[key] || key || '').trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
 }
@@ -376,3 +371,5 @@ function isHotkeyModifier(key) {
 function useHotkeys(keys, callback, options, dependencies) {
-  var ref = react.useRef(null);
+  var _useState = react.useState(null),
+    ref = _useState[0],
+    setRef = _useState[1];
   var hasTriggeredRef = react.useRef(false);
@@ -407,5 +404,5 @@ var _options = !(options instanceof Array) ? options : !(dependencies instanceof Array) ? dependencies : undefined;
       // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
-      if (ref.current !== null) {
-        var rootNode = ref.current.getRootNode();
-        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref.current && !ref.current.contains(rootNode.activeElement)) {
+      if (ref !== null) {
+        var rootNode = ref.getRootNode();
+        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref && !ref.contains(rootNode.activeElement)) {
           stopPropagation(e);
@@ -462,3 +459,3 @@ return;
     };
-    var domNode = ref.current || (_options == null ? void 0 : _options.document) || document;
+    var domNode = ref || (_options == null ? void 0 : _options.document) || document;
     // @ts-ignore
@@ -484,4 +481,4 @@ domNode.addEventListener('keyup', handleKeyUp);
     };
-  }, [_keys, memoisedOptions, enabledScopes]);
-  return ref;
+  }, [ref, _keys, memoisedOptions, enabledScopes]);
+  return setRef;
 }
@@ -488,0 +485,0 @@

dist/react-hotkeys-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),t=require("react/jsx-runtime");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var o=["shift","alt","meta","mod","ctrl"],r={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function i(e){return(r[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function u(e,t){return void 0===t&&(t=","),e.split(t)}function c(e,t,r){void 0===t&&(t="+");var u=e.toLocaleLowerCase().split(t).map((function(e){return i(e)}));return n({},{alt:u.includes("alt"),ctrl:u.includes("ctrl")||u.includes("control"),shift:u.includes("shift"),meta:u.includes("meta"),mod:u.includes("mod")},{keys:u.filter((function(e){return!o.includes(e)})),description:r})}"undefined"!=typeof document&&(document.addEventListener("keydown",(function(e){void 0!==e.key&&d([i(e.key),i(e.code)])})),document.addEventListener("keyup",(function(e){void 0!==e.key&&f([i(e.key),i(e.code)])}))),"undefined"!=typeof window&&window.addEventListener("blur",(function(){a.clear()}));var a=new Set;function l(e){return Array.isArray(e)}function s(e,t){return void 0===t&&(t=","),(l(e)?e:e.split(t)).every((function(e){return a.has(e.trim().toLowerCase())}))}function d(e){var t=Array.isArray(e)?e:[e];a.has("meta")&&a.forEach((function(e){return!function(e){return o.includes(e)}(e)&&a.delete(e.toLowerCase())})),t.forEach((function(e){return a.add(e.toLowerCase())}))}function f(e){var t=Array.isArray(e)?e:[e];"meta"===e?a.clear():t.forEach((function(e){return a.delete(e.toLowerCase())}))}function v(e,t){var n=e.target;void 0===t&&(t=!1);var o=n&&n.tagName;return l(t)?Boolean(o&&t&&t.some((function(e){return e.toLowerCase()===o.toLowerCase()}))):Boolean(o&&t&&!0===t)}var y=e.createContext(void 0);function p(e){return t.jsx(y.Provider,{value:{addHotkey:e.addHotkey,removeHotkey:e.removeHotkey},children:e.children})}function k(e,t){return e&&t&&"object"==typeof e&&"object"==typeof t?Object.keys(e).length===Object.keys(t).length&&Object.keys(e).reduce((function(n,o){return n&&k(e[o],t[o])}),!0):e===t}var m=e.createContext({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),h=function(){return e.useContext(m)},b=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},w="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;exports.HotkeysProvider=function(n){var o=n.initiallyActiveScopes,r=void 0===o?["*"]:o,i=n.children,u=e.useState((null==r?void 0:r.length)>0?r:["*"]),c=u[0],a=u[1],l=e.useState([]),s=l[0],d=l[1],f=e.useCallback((function(e){a((function(t){return t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),v=e.useCallback((function(e){a((function(t){return 0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e}))}))}),[]),y=e.useCallback((function(e){a((function(t){return t.includes(e)?0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e})):t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),h=e.useCallback((function(e){d((function(t){return[].concat(t,[e])}))}),[]),b=e.useCallback((function(e){d((function(t){return t.filter((function(t){return!k(t,e)}))}))}),[]);return t.jsx(m.Provider,{value:{enabledScopes:c,hotkeys:s,enableScope:f,disableScope:v,toggleScope:y},children:t.jsx(p,{addHotkey:h,removeHotkey:b,children:i})})},exports.isHotkeyPressed=s,exports.useHotkeys=function(t,n,o,r){var a=e.useRef(null),p=e.useRef(!1),m=o instanceof Array?r instanceof Array?void 0:r:o,g=l(t)?t.join(null==m?void 0:m.splitKey):t,C=o instanceof Array?o:r instanceof Array?r:void 0,S=e.useCallback(n,null!=C?C:[]),L=e.useRef(S);L.current=C?S:n;var E=function(t){var n=e.useRef(void 0);return k(n.current,t)||(n.current=t),n.current}(m),A=h().enabledScopes,x=e.useContext(y);return w((function(){if(!1!==(null==E?void 0:E.enabled)&&(t=null==E?void 0:E.scopes,0===(e=A).length&&t?(console.warn('A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'),1):!t||e.some((function(e){return t.includes(e)}))||e.includes("*"))){var e,t,n=function(e,t){var n;if(void 0===t&&(t=!1),!v(e,["input","textarea","select"])||v(e,null==E?void 0:E.enableOnFormTags)){if(null!==a.current){var o=a.current.getRootNode();if((o instanceof Document||o instanceof ShadowRoot)&&o.activeElement!==a.current&&!a.current.contains(o.activeElement))return void b(e)}(null==(n=e.target)||!n.isContentEditable||null!=E&&E.enableOnContentEditable)&&u(g,null==E?void 0:E.splitKey).forEach((function(n){var o,r=c(n,null==E?void 0:E.combinationKey);if(function(e,t,n){void 0===n&&(n=!1);var o=t.alt,r=t.meta,u=t.mod,c=t.shift,a=t.ctrl,l=t.keys,d=e.key,f=e.ctrlKey,v=e.metaKey,y=e.shiftKey,p=e.altKey,k=i(e.code),m=d.toLowerCase();if(!(null!=l&&l.includes(k)||null!=l&&l.includes(m)||["ctrl","control","unknown","meta","alt","shift","os"].includes(k)))return!1;if(!n){if(o===!p&&"alt"!==m)return!1;if(c===!y&&"shift"!==m)return!1;if(u){if(!v&&!f)return!1}else{if(r===!v&&"meta"!==m&&"os"!==m)return!1;if(a===!f&&"ctrl"!==m&&"control"!==m)return!1}}return!(!l||1!==l.length||!l.includes(m)&&!l.includes(k))||(l?s(l):!l)}(e,r,null==E?void 0:E.ignoreModifiers)||null!=(o=r.keys)&&o.includes("*")){if(null!=E&&null!=E.ignoreEventWhen&&E.ignoreEventWhen(e))return;if(t&&p.current)return;if(function(e,t,n){("function"==typeof n&&n(e,t)||!0===n)&&e.preventDefault()}(e,r,null==E?void 0:E.preventDefault),!function(e,t,n){return"function"==typeof n?n(e,t):!0===n||void 0===n}(e,r,null==E?void 0:E.enabled))return void b(e);L.current(e,r),t||(p.current=!0)}}))}},o=function(e){void 0!==e.key&&(d(i(e.code)),(void 0===(null==E?void 0:E.keydown)&&!0!==(null==E?void 0:E.keyup)||null!=E&&E.keydown)&&n(e))},r=function(e){void 0!==e.key&&(f(i(e.code)),p.current=!1,null!=E&&E.keyup&&n(e,!0))},l=a.current||(null==m?void 0:m.document)||document;return l.addEventListener("keyup",r),l.addEventListener("keydown",o),x&&u(g,null==E?void 0:E.splitKey).forEach((function(e){return x.addHotkey(c(e,null==E?void 0:E.combinationKey,null==E?void 0:E.description))})),function(){l.removeEventListener("keyup",r),l.removeEventListener("keydown",o),x&&u(g,null==E?void 0:E.splitKey).forEach((function(e){return x.removeHotkey(c(e,null==E?void 0:E.combinationKey,null==E?void 0:E.description))}))}}}),[g,E,A]),a},exports.useHotkeysContext=h,exports.useRecordHotkeys=function(){var t=e.useState(new Set),n=t[0],o=t[1],r=e.useState(!1),u=r[0],c=r[1],a=e.useCallback((function(e){void 0!==e.key&&(e.preventDefault(),e.stopPropagation(),o((function(t){var n=new Set(t);return n.add(i(e.code)),n})))}),[]),l=e.useCallback((function(){"undefined"!=typeof document&&(document.removeEventListener("keydown",a),c(!1))}),[a]),s=e.useCallback((function(){o(new Set),"undefined"!=typeof document&&(l(),document.addEventListener("keydown",a),c(!0))}),[a,l]),d=e.useCallback((function(){o(new Set)}),[]);return[n,{start:s,stop:l,resetKeys:d,isRecording:u}]};
+"use strict";var e=require("react"),n=require("react/jsx-runtime");function t(){return(t=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(null,arguments)}var o=["shift","alt","meta","mod","ctrl"],r={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function i(e){return(e&&r[e]||e||"").trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function u(e,n){return void 0===n&&(n=","),e.split(n)}function c(e,n,r){void 0===n&&(n="+");var u=e.toLocaleLowerCase().split(n).map((function(e){return i(e)}));return t({},{alt:u.includes("alt"),ctrl:u.includes("ctrl")||u.includes("control"),shift:u.includes("shift"),meta:u.includes("meta"),mod:u.includes("mod")},{keys:u.filter((function(e){return!o.includes(e)})),description:r})}"undefined"!=typeof document&&(document.addEventListener("keydown",(function(e){void 0!==e.key&&d([i(e.key),i(e.code)])})),document.addEventListener("keyup",(function(e){void 0!==e.key&&f([i(e.key),i(e.code)])}))),"undefined"!=typeof window&&window.addEventListener("blur",(function(){a.clear()}));var a=new Set;function l(e){return Array.isArray(e)}function s(e,n){return void 0===n&&(n=","),(l(e)?e:e.split(n)).every((function(e){return a.has(e.trim().toLowerCase())}))}function d(e){var n=Array.isArray(e)?e:[e];a.has("meta")&&a.forEach((function(e){return!function(e){return o.includes(e)}(e)&&a.delete(e.toLowerCase())})),n.forEach((function(e){return a.add(e.toLowerCase())}))}function f(e){var n=Array.isArray(e)?e:[e];"meta"===e?a.clear():n.forEach((function(e){return a.delete(e.toLowerCase())}))}function v(e,n){var t=e.target;void 0===n&&(n=!1);var o=t&&t.tagName;return l(n)?Boolean(o&&n&&n.some((function(e){return e.toLowerCase()===o.toLowerCase()}))):Boolean(o&&n&&!0===n)}var y=e.createContext(void 0);function p(e){return n.jsx(y.Provider,{value:{addHotkey:e.addHotkey,removeHotkey:e.removeHotkey},children:e.children})}function k(e,n){return e&&n&&"object"==typeof e&&"object"==typeof n?Object.keys(e).length===Object.keys(n).length&&Object.keys(e).reduce((function(t,o){return t&&k(e[o],n[o])}),!0):e===n}var m=e.createContext({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),h=function(){return e.useContext(m)},b=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},w="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;exports.HotkeysProvider=function(t){var o=t.initiallyActiveScopes,r=void 0===o?["*"]:o,i=t.children,u=e.useState((null==r?void 0:r.length)>0?r:["*"]),c=u[0],a=u[1],l=e.useState([]),s=l[0],d=l[1],f=e.useCallback((function(e){a((function(n){return n.includes("*")?[e]:Array.from(new Set([].concat(n,[e])))}))}),[]),v=e.useCallback((function(e){a((function(n){return 0===n.filter((function(n){return n!==e})).length?["*"]:n.filter((function(n){return n!==e}))}))}),[]),y=e.useCallback((function(e){a((function(n){return n.includes(e)?0===n.filter((function(n){return n!==e})).length?["*"]:n.filter((function(n){return n!==e})):n.includes("*")?[e]:Array.from(new Set([].concat(n,[e])))}))}),[]),h=e.useCallback((function(e){d((function(n){return[].concat(n,[e])}))}),[]),b=e.useCallback((function(e){d((function(n){return n.filter((function(n){return!k(n,e)}))}))}),[]);return n.jsx(m.Provider,{value:{enabledScopes:c,hotkeys:s,enableScope:f,disableScope:v,toggleScope:y},children:n.jsx(p,{addHotkey:h,removeHotkey:b,children:i})})},exports.isHotkeyPressed=s,exports.useHotkeys=function(n,t,o,r){var a=e.useState(null),p=a[0],m=a[1],g=e.useRef(!1),C=o instanceof Array?r instanceof Array?void 0:r:o,S=l(n)?n.join(null==C?void 0:C.splitKey):n,L=o instanceof Array?o:r instanceof Array?r:void 0,E=e.useCallback(t,null!=L?L:[]),A=e.useRef(E);A.current=L?E:t;var x=function(n){var t=e.useRef(void 0);return k(t.current,n)||(t.current=n),t.current}(C),H=h().enabledScopes,j=e.useContext(y);return w((function(){if(!1!==(null==x?void 0:x.enabled)&&(n=null==x?void 0:x.scopes,0===(e=H).length&&n?(console.warn('A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'),1):!n||e.some((function(e){return n.includes(e)}))||e.includes("*"))){var e,n,t=function(e,n){var t;if(void 0===n&&(n=!1),!v(e,["input","textarea","select"])||v(e,null==x?void 0:x.enableOnFormTags)){if(null!==p){var o=p.getRootNode();if((o instanceof Document||o instanceof ShadowRoot)&&o.activeElement!==p&&!p.contains(o.activeElement))return void b(e)}(null==(t=e.target)||!t.isContentEditable||null!=x&&x.enableOnContentEditable)&&u(S,null==x?void 0:x.splitKey).forEach((function(t){var o,r=c(t,null==x?void 0:x.combinationKey);if(function(e,n,t){void 0===t&&(t=!1);var o=n.alt,r=n.meta,u=n.mod,c=n.shift,a=n.ctrl,l=n.keys,d=e.key,f=e.ctrlKey,v=e.metaKey,y=e.shiftKey,p=e.altKey,k=i(e.code),m=d.toLowerCase();if(!(null!=l&&l.includes(k)||null!=l&&l.includes(m)||["ctrl","control","unknown","meta","alt","shift","os"].includes(k)))return!1;if(!t){if(o===!p&&"alt"!==m)return!1;if(c===!y&&"shift"!==m)return!1;if(u){if(!v&&!f)return!1}else{if(r===!v&&"meta"!==m&&"os"!==m)return!1;if(a===!f&&"ctrl"!==m&&"control"!==m)return!1}}return!(!l||1!==l.length||!l.includes(m)&&!l.includes(k))||(l?s(l):!l)}(e,r,null==x?void 0:x.ignoreModifiers)||null!=(o=r.keys)&&o.includes("*")){if(null!=x&&null!=x.ignoreEventWhen&&x.ignoreEventWhen(e))return;if(n&&g.current)return;if(function(e,n,t){("function"==typeof t&&t(e,n)||!0===t)&&e.preventDefault()}(e,r,null==x?void 0:x.preventDefault),!function(e,n,t){return"function"==typeof t?t(e,n):!0===t||void 0===t}(e,r,null==x?void 0:x.enabled))return void b(e);A.current(e,r),n||(g.current=!0)}}))}},o=function(e){void 0!==e.key&&(d(i(e.code)),(void 0===(null==x?void 0:x.keydown)&&!0!==(null==x?void 0:x.keyup)||null!=x&&x.keydown)&&t(e))},r=function(e){void 0!==e.key&&(f(i(e.code)),g.current=!1,null!=x&&x.keyup&&t(e,!0))},a=p||(null==C?void 0:C.document)||document;return a.addEventListener("keyup",r),a.addEventListener("keydown",o),j&&u(S,null==x?void 0:x.splitKey).forEach((function(e){return j.addHotkey(c(e,null==x?void 0:x.combinationKey,null==x?void 0:x.description))})),function(){a.removeEventListener("keyup",r),a.removeEventListener("keydown",o),j&&u(S,null==x?void 0:x.splitKey).forEach((function(e){return j.removeHotkey(c(e,null==x?void 0:x.combinationKey,null==x?void 0:x.description))}))}}}),[p,S,x,H]),m},exports.useHotkeysContext=h,exports.useRecordHotkeys=function(){var n=e.useState(new Set),t=n[0],o=n[1],r=e.useState(!1),u=r[0],c=r[1],a=e.useCallback((function(e){void 0!==e.key&&(e.preventDefault(),e.stopPropagation(),o((function(n){var t=new Set(n);return t.add(i(e.code)),t})))}),[]),l=e.useCallback((function(){"undefined"!=typeof document&&(document.removeEventListener("keydown",a),c(!1))}),[a]),s=e.useCallback((function(){o(new Set),"undefined"!=typeof document&&(l(),document.addEventListener("keydown",a),c(!0))}),[a,l]),d=e.useCallback((function(){o(new Set)}),[]);return[t,{start:s,stop:l,resetKeys:d,isRecording:u}]};
 //# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

dist/react-hotkeys-hook.esm.js

@@ -5,14 +5,9 @@ import { useContext, createContext, useState, useCallback, useRef, useLayoutEffect, useEffect } from 'react';
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
@@ -43,3 +38,3 @@
 function mapKey(key) {
-  return (mappedKeys[key] || key).trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
+  return (key && mappedKeys[key] || key || '').trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
 }
@@ -374,3 +369,5 @@ function isHotkeyModifier(key) {
 function useHotkeys(keys, callback, options, dependencies) {
-  var ref = useRef(null);
+  var _useState = useState(null),
+    ref = _useState[0],
+    setRef = _useState[1];
   var hasTriggeredRef = useRef(false);
@@ -405,5 +402,5 @@ var _options = !(options instanceof Array) ? options : !(dependencies instanceof Array) ? dependencies : undefined;
       // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
-      if (ref.current !== null) {
-        var rootNode = ref.current.getRootNode();
-        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref.current && !ref.current.contains(rootNode.activeElement)) {
+      if (ref !== null) {
+        var rootNode = ref.getRootNode();
+        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref && !ref.contains(rootNode.activeElement)) {
           stopPropagation(e);
@@ -460,3 +457,3 @@ return;
     };
-    var domNode = ref.current || (_options == null ? void 0 : _options.document) || document;
+    var domNode = ref || (_options == null ? void 0 : _options.document) || document;
     // @ts-ignore
@@ -482,4 +479,4 @@ domNode.addEventListener('keyup', handleKeyUp);
     };
-  }, [_keys, memoisedOptions, enabledScopes]);
-  return ref;
+  }, [ref, _keys, memoisedOptions, enabledScopes]);
+  return setRef;
 }
@@ -486,0 +483,0 @@

dist/useHotkeys.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 import { HotkeyCallback, Keys, OptionsOrDependencyArray, RefType } from './types';
-export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): import("react").MutableRefObject<RefType<T>>;
+export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): (instance: RefType<T>) => void;

package.json

 {
   "name": "react-hotkeys-hook",
   "description": "React hook for handling keyboard shortcuts",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "repository": {
@@ -81,28 +81,28 @@ "type": "git",
   "devDependencies": {
-    "@babel/core": "7.23.7",
+    "@babel/core": "7.25.2",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-transform-react-jsx": "7.23.4",
-    "@babel/preset-env": "7.23.7",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.1.2",
+    "@babel/plugin-transform-react-jsx": "7.25.2",
+    "@babel/preset-env": "7.25.3",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.11",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
-    "eslint": "8.56.0",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
+    "eslint": "8.57.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.35.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-test-renderer": "18.3.1",
     "tsdx": "0.14.1",
-    "tslib": "2.6.2",
-    "typescript": "5.3.3"
+    "tslib": "2.6.3",
+    "typescript": "5.5.4"
   },
@@ -109,0 +109,0 @@ "peerDependencies": {

README.md

@@ -139,3 +139,3 @@ <hr>
 |---------------|---------------------------------------------------------|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `keys`        | `string` or `string[]`                                  | required  | -             | set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a colon. This split key value can be overridden with the `splitKey` option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `keys`        | `string` or `string[]`                                  | required  | -             | set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a comma. This split key value can be overridden with the `splitKey` option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `callback`    | `(event: KeyboardEvent, handler: HotkeysEvent) => void` | required  | -             | This is the callback function that will be called when the hotkey is pressed. The callback will receive the browsers native `KeyboardEvent` and the libraries `HotkeysEvent`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
@@ -142,0 +142,0 @@ | `options`     | `Options`                                               | optional  | `{}`          | Object to modify the behavior of the hook. Default options are given below.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |

src/parseHotkeys.ts

@@ -27,4 +27,4 @@ import { Hotkey, KeyboardModifiers } from './types'
 
-export function mapKey(key: string): string {
-  return (mappedKeys[key] || key)
+export function mapKey(key?: string): string {
+  return ((key && mappedKeys[key]) || key || '')
     .trim()
@@ -31,0 +31,0 @@ .toLowerCase()

src/useHotkeys.ts

 import { HotkeyCallback, Keys, Options, OptionsOrDependencyArray, RefType } from './types'
-import { DependencyList, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { DependencyList, RefCallback, useCallback, useEffect, useState, useLayoutEffect, useRef } from 'react'
 import { mapKey, parseHotkey, parseKeysHookInput } from './parseHotkeys'
@@ -31,3 +31,3 @@ import {
 ) {
-  const ref = useRef<RefType<T>>(null)
+  const [ref, setRef] = useState<RefType<T>>(null)
   const hasTriggeredRef = useRef(false)
@@ -70,8 +70,8 @@
       // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
-      if (ref.current !== null) {
-        const rootNode = ref.current.getRootNode()
+      if (ref !== null) {
+        const rootNode = ref.getRootNode()
         if (
           (rootNode instanceof Document || rootNode instanceof ShadowRoot) &&
-          rootNode.activeElement !== ref.current &&
-          !ref.current.contains(rootNode.activeElement)
+          rootNode.activeElement !== ref &&
+          !ref.contains(rootNode.activeElement)
         ) {
@@ -145,3 +145,3 @@ stopPropagation(e)
 
-    const domNode = ref.current || _options?.document || document
+    const domNode = ref || _options?.document || document
 
@@ -171,5 +171,5 @@ // @ts-ignore
     }
-  }, [_keys, memoisedOptions, enabledScopes])
+  }, [ref, _keys, memoisedOptions, enabledScopes])
 
-  return ref
+  return setRef as RefCallback<T>
 }

src/validators.ts

@@ -61,3 +61,7 @@ import { FormTags, Hotkey, Scopes, Trigger } from './types'
 
-  if (!keys?.includes(keyCode) && !keys?.includes(pressedKey) && !['ctrl', 'control', 'unknown', 'meta', 'alt', 'shift', 'os'].includes(keyCode)) {
+  if (
+    !keys?.includes(keyCode) &&
+    !keys?.includes(pressedKey) &&
+    !['ctrl', 'control', 'unknown', 'meta', 'alt', 'shift', 'os'].includes(keyCode)
+  ) {
     return false
@@ -64,0 +68,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

196631

0.08%

Worsened metrics

Lines of code

1712

-0.17%

No dependency changes