react-hotkeys-hook 3.4.0 → 3.4.4

package/README.md

@@ -2,16 +2,18 @@
 React hook for using keyboard shortcuts in components.
 This is a hook version for the [hotkeys] package.
 
+## Documentation & Live Examples
+
+* [Quick Start](https://react-hotkeys-hook.vercel.app/docs/intro)
+* [Documentation](https://react-hotkeys-hook.vercel.app/docs/documentation/installation)
+* [API](https://react-hotkeys-hook.vercel.app/docs/api/use-hotkeys)
+
 ## [Join the discussion for version 4!](https://github.com/JohannesKlauss/react-hotkeys-hook/issues/574)
 
 If you use this package please share your thoughts on how we can improve this hook with version 4.
 Please engage at the corresponding [Github issue](https://github.com/JohannesKlauss/react-hotkeys-hook/issues/574).
 
-### Documentation and live example
-
-https://johannesklauss.github.io/react-hotkeys-hook/
-
-### Installation
+## Installation
 
 ```shell
 npm install react-hotkeys-hook
@@ -25,7 +27,7 @@ yarn add react-hotkeys-hook
 
 Make sure that you have at least version 16.8 of `react` and `react-dom` installed, or otherwise hooks won't work for you.
 
-### Usage
+## Usage
 ```js
 export const ExampleComponent = () => {
   const [count, setCount] = useState(0);
@@ -74,32 +76,39 @@ depend on any unstable callbacks or changing values over time you can leave this
 empty array by default. See the [Memoisation](#memoisation) section to
 learn more and see an example where you have to set this array.
 
-### `useIsHotkeyPressed` hook
+### `isHotkeyPressed` function
 
-The `useIsHotkeyPressed` hook just returns the `hotkeys.isPressed` function and works exactly the same.
+This function allows us to check if the user is currently pressing down a key.
 
 ```ts
-const isPressed = useIsHotkeyPressed();
+import { isHotkeyPressed } from 'react-hotkeys-hook';
 
-isPressed('return'); // Returns true if Return key is pressed down.
+isHotkeyPressed('return'); // Returns true if Return key is pressed down.
 ```
 
-### Found an issue or have a feature request?
+## Support
+
+* Ask your question in the [Github Discussions]([Support](https://github.com/JohannesKlauss/react-hotkeys-hook/discussions))
+* Ask your question on [StackOverflow](https://stackoverflow.com/search?page=1&tab=Relevance&q=react-hotkeys-hook)
+
+If you'd like to support me, please buy me a ko-fi:
+
+[![alt text](https://ucbab0164bf5c81e2a9872c53fa1.previews.dropboxusercontent.com/p/thumb/ABTE4xGDxskgsqIuOARP8_ePPukYVVLKu8I7pKjNIf9u7aJmZcTeCXXCVyQsHkviVu_5aHZWlDRVoxO_o6gEDyTngS6wyWdoRdFqzANOEgUGj5ZcREIMy33x6DKDJkg1CORDq74mJPPBmkUnIph9OKWswrc2zY3sKeNBbBbbE2Xadfy78mWAQCtRXuvwrwV-mDjxsvxrcOZo73i-9J1u2p2QYjeP7jGPCqNnuavI-18SF65Kq6KFBEyhJQ1WtqJzmEWT92alq24aQlizVSt9w10_ouccdemRwhPaSLaFvyAETrFo9gGQe21ocMjTzT9tTb7ctWZBkIi6zVvy8EKfKsTE8nB7O3tbNd2_uQrVnd-kLg/p.png?fv_content=true&size_mode=5 "Buy me a Ko-Fi")](https://ko-fi.com/thegoodcode#checkoutModal)
+
+## Found an issue or have a feature request?
 
-Open up an issue or pull request and participate.
+Open up an [issue](https://github.com/JohannesKlauss/react-hotkeys-hook/issues/new)
+or [pull request](https://github.com/JohannesKlauss/react-hotkeys-hook/compare) and participate.
 
-### Local Development
+## Local Development
 
-Checkout this repo, run `yarn` or `npm i` and then run the `docz:dev` script.
-You can use the `docs/useHotkeys.mdx` to test the behavior of the hook. It directly imports the
-`src/index.ts` file and transpiles it automatically. So you don't have to worry about. For more info
-on .mdx files, check out the docz documentation: https://www.docz.site/docs/writing-mdx
+Checkout this repo, run `yarn` or `npm i` and then run the `test` script to test the behavior of the hook.
 
-### Authors
+## Authors
 
 * Johannes Klauss
 
-### Contributors
+## Contributors
 
 * [bernatmv](https://github.com/bernatmv)
 * [wheeler](https://github.com/wheeler)

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

@@ -68,6 +68,7 @@ function useHotkeys(keys, callback, options, deps) {
   }, deps ? [ref, enableOnTags, filter].concat(deps) : [ref, enableOnTags, filter]);
   react.useEffect(function () {
     if (!enabled) {
+      hotkeys.unbind(keys, memoisedCallback);
       return;
     } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
 

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

@@ -1 +1 @@
-{"version":3,"file":"react-hotkeys-hook.cjs.development.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":";;;;;;;AAEA;;;;SAGgBA;AACd,SAAOC,OAAO,CAACC,SAAf;AACD;;ACDDD,OAAO,CAACE,MAAR,GAAiB;AAAA,SAAM,IAAN;AAAA,CAAjB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA4BC,YAA5B;MAAGC,cAAAA;AACnB,MAAMC,aAAa,GAAGD,MAAM,IAAKA,MAAsB,CAACE,OAAxD;AAEA,SAAOC,OAAO,CAAEF,aAAa,IAAIF,YAAjB,IAAiCA,YAAY,CAACK,QAAb,CAAsBH,aAAtB,CAAnC,CAAd;AACD,CAJD;;AAMA,IAAMI,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,EAAD;AACtC,SAAOR,SAAS,CAACQ,EAAD,EAAK,CAAC,OAAD,EAAU,UAAV,EAAsB,QAAtB,CAAL,CAAhB;AACD,CAFD;;AAmBA,SAAgBC,WAA8BC,MAAcC,UAAsBC,SAA2BC;AAC3G,MAAID,OAAO,YAAYE,KAAvB,EAA8B;AAC5BD,IAAAA,IAAI,GAAGD,OAAP;AACAA,IAAAA,OAAO,GAAGG,SAAV;AACD;;AAED,cAQIH,OAAkB,IAAI,EAR1B;AAAA,MACEX,YADF,SACEA,YADF;AAAA,MAEEF,MAFF,SAEEA,MAFF;AAAA,MAGEiB,KAHF,SAGEA,KAHF;AAAA,MAIEC,OAJF,SAIEA,OAJF;AAAA,oCAKEC,oBALF;AAAA,MAKEA,oBALF,sCAKyB,IALzB;AAAA,4BAMEC,OANF;AAAA,MAMEA,OANF,8BAMY,IANZ;AAAA,oCAOEC,uBAPF;AAAA,MAOEA,uBAPF,sCAO4B,KAP5B;;AASA,MAAMC,GAAG,GAAGC,YAAM,CAAW,IAAX,CAAlB;;AAGA,MAAMC,gBAAgB,GAAGC,iBAAW,CAAC,UAACC,aAAD,EAA+BC,YAA/B;;;AACnC,QAAI3B,MAAM,IAAI,CAACA,MAAM,CAAC0B,aAAD,CAArB,EAAsC;AACpC,aAAO,CAACP,oBAAR;AACD;;;AAGD,QACGX,+BAA+B,CAACkB,aAAD,CAA/B,IAAkD,CAACzB,SAAS,CAACyB,aAAD,EAAgBxB,YAAhB,CAA7D,IACK,yBAAAwB,aAAa,CAACvB,MAAd,mCAAsCyB,iBAAtC,IAA2D,CAACP,uBAFnE,EAGE;AACA,aAAO,IAAP;AACD;;AAED,QAAIC,GAAG,CAACO,OAAJ,KAAgB,IAAhB,IAAwBC,QAAQ,CAACC,aAAT,KAA2BT,GAAG,CAACO,OAA3D,EAAoE;AAClEjB,MAAAA,QAAQ,CAACc,aAAD,EAAgBC,YAAhB,CAAR;AACA,aAAO,IAAP;AACD;;AAED,WAAO,KAAP;AACD,GAnBmC,EAmBjCb,IAAI,IAAIQ,GAAJ,EAASpB,YAAT,EAAuBF,MAAvB,SAAkCc,IAAlC,IAA0C,CAACQ,GAAD,EAAMpB,YAAN,EAAoBF,MAApB,CAnBb,CAApC;AAqBAgC,EAAAA,eAAS,CAAC;AACR,QAAI,CAACZ,OAAL,EAAc;AACZ;AACD;;;AAGD,QAAIH,KAAK,IAAIC,OAAO,KAAK,IAAzB,EAA+B;AAC5BL,MAAAA,OAAmB,CAACK,OAApB,GAA8B,KAA9B;AACF;;AAEDpB,IAAAA,OAAO,CAACa,IAAD,EAAQE,OAAmB,IAAI,EAA/B,EAAmCW,gBAAnC,CAAP;AAEA,WAAO;AAAA,aAAM1B,OAAO,CAACmC,MAAR,CAAetB,IAAf,EAAqBa,gBAArB,CAAN;AAAA,KAAP;AACD,GAbQ,EAaN,CAACA,gBAAD,EAAmBb,IAAnB,EAAyBS,OAAzB,CAbM,CAAT;AAeA,SAAOE,GAAP;AACD;;ICpFKY,eAAe,GAAGpC,OAAO,CAACC,SAAhC;;;;;;"}
+{"version":3,"file":"react-hotkeys-hook.cjs.development.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      hotkeys.unbind(keys, memoisedCallback);\n\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e,t=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("react");t.filter=function(){return!0};var r=function(e,t){var n=e.target,r=n&&n.tagName;return Boolean(r&&t&&t.includes(r))};exports.isHotkeyPressed=t.isPressed,exports.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var s=i||{},a=s.enableOnTags,l=s.filter,c=s.keyup,f=s.keydown,d=s.filterPreventDefault,v=void 0===d||d,y=s.enabled,b=void 0===y||y,k=s.enableOnContentEditable,E=void 0!==k&&k,P=n.useRef(null),p=n.useCallback((function(e,t){var n;return l&&!l(e)?!v:!!(r(e,["INPUT","TEXTAREA","SELECT"])&&!r(e,a)||null!=(n=e.target)&&n.isContentEditable&&!E)||(null===P.current||document.activeElement===P.current)&&(u(e,t),!0)}),o?[P,a,l].concat(o):[P,a,l]);return n.useEffect((function(){if(b)return c&&!0!==f&&(i.keydown=!1),t(e,i||{},p),function(){return t.unbind(e,p)}}),[p,e,b]),P},exports.useIsHotkeyPressed=function(){return t.isPressed};
+"use strict";var e,t=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("react");t.filter=function(){return!0};var r=function(e,t){var n=e.target,r=n&&n.tagName;return Boolean(r&&t&&t.includes(r))};exports.isHotkeyPressed=t.isPressed,exports.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var s=i||{},a=s.enableOnTags,l=s.filter,c=s.keyup,d=s.keydown,f=s.filterPreventDefault,v=void 0===f||f,b=s.enabled,y=void 0===b||b,k=s.enableOnContentEditable,E=void 0!==k&&k,P=n.useRef(null),p=n.useCallback((function(e,t){var n;return l&&!l(e)?!v:!!(r(e,["INPUT","TEXTAREA","SELECT"])&&!r(e,a)||null!=(n=e.target)&&n.isContentEditable&&!E)||(null===P.current||document.activeElement===P.current)&&(u(e,t),!0)}),o?[P,a,l].concat(o):[P,a,l]);return n.useEffect((function(){if(y)return c&&!0!==d&&(i.keydown=!1),t(e,i||{},p),function(){return t.unbind(e,p)};t.unbind(e,p)}),[p,e,y]),P},exports.useIsHotkeyPressed=function(){return t.isPressed};
 //# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"react-hotkeys-hook.cjs.production.min.js","sources":["../src/useHotkeys.ts","../src/index.ts","../src/useIsHotkeyPressed.ts"],"sourcesContent":["import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };","import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}"],"names":["hotkeys","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isPressed","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind"],"mappings":"iHAMAA,EAAQC,OAAS,kBAAM,GAEvB,IAAMC,EAAY,WAA4BC,OAAzBC,IAAAA,OACbC,EAAgBD,GAAWA,EAAuBE,eAEjDC,QAASF,GAAiBF,GAAgBA,EAAaK,SAASH,6BCPjDL,EAAQS,6BD6BhC,SAA8CC,EAAcC,EAAsBC,EAA2BC,GACvGD,aAAmBE,QACrBD,EAAOD,EACPA,OAAUG,SAWRH,GAAsB,GAPxBT,IAAAA,aACAF,IAAAA,OACAe,IAAAA,MACAC,IAAAA,YACAC,qBAAAA,oBACAC,QAAAA,oBACAC,wBAAAA,gBAEIC,EAAMC,SAAiB,MAGvBC,EAAmBC,eAAY,SAACC,EAA8BC,gBAC9DzB,IAAWA,EAAOwB,IACZP,KAtCLhB,EA2C8BuB,EA3ChB,CAAC,QAAS,WAAY,aA2CavB,EAAUuB,EAAetB,aACxEsB,EAAcrB,WAAwBuB,oBAAsBP,KAK/C,OAAhBC,EAAIO,SAAoBC,SAASC,gBAAkBT,EAAIO,WACzDjB,EAASc,EAAeC,IACjB,KAIRb,GAAQQ,EAAKlB,EAAcF,UAAWY,GAAQ,CAACQ,EAAKlB,EAAcF,WAErE8B,aAAU,cACHZ,SAKDH,IAAqB,IAAZC,IACVL,EAAoBK,SAAU,GAGjCjB,EAAQU,EAAOE,GAAuB,GAAIW,GAEnC,kBAAMvB,EAAQgC,OAAOtB,EAAMa,MACjC,CAACA,EAAkBb,EAAMS,IAErBE,gDEjFArB,EAAQS"}
+{"version":3,"file":"react-hotkeys-hook.cjs.production.min.js","sources":["../src/useHotkeys.ts","../src/index.ts","../src/useIsHotkeyPressed.ts"],"sourcesContent":["import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      hotkeys.unbind(keys, memoisedCallback);\n\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };","import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}"],"names":["hotkeys","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isPressed","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind"],"mappings":"iHAMAA,EAAQC,OAAS,kBAAM,GAEvB,IAAMC,EAAY,WAA4BC,OAAzBC,IAAAA,OACbC,EAAgBD,GAAWA,EAAuBE,eAEjDC,QAASF,GAAiBF,GAAgBA,EAAaK,SAASH,6BCPjDL,EAAQS,6BD6BhC,SAA8CC,EAAcC,EAAsBC,EAA2BC,GACvGD,aAAmBE,QACrBD,EAAOD,EACPA,OAAUG,SAWRH,GAAsB,GAPxBT,IAAAA,aACAF,IAAAA,OACAe,IAAAA,MACAC,IAAAA,YACAC,qBAAAA,oBACAC,QAAAA,oBACAC,wBAAAA,gBAEIC,EAAMC,SAAiB,MAGvBC,EAAmBC,eAAY,SAACC,EAA8BC,gBAC9DzB,IAAWA,EAAOwB,IACZP,KAtCLhB,EA2C8BuB,EA3ChB,CAAC,QAAS,WAAY,aA2CavB,EAAUuB,EAAetB,aACxEsB,EAAcrB,WAAwBuB,oBAAsBP,KAK/C,OAAhBC,EAAIO,SAAoBC,SAASC,gBAAkBT,EAAIO,WACzDjB,EAASc,EAAeC,IACjB,KAIRb,GAAQQ,EAAKlB,EAAcF,UAAWY,GAAQ,CAACQ,EAAKlB,EAAcF,WAErE8B,aAAU,cACHZ,SAODH,IAAqB,IAAZC,IACVL,EAAoBK,SAAU,GAGjCjB,EAAQU,EAAOE,GAAuB,GAAIW,GAEnC,kBAAMvB,EAAQgC,OAAOtB,EAAMa,IAZhCvB,EAAQgC,OAAOtB,EAAMa,KAatB,CAACA,EAAkBb,EAAMS,IAErBE,gDEnFArB,EAAQS"}

package/dist/react-hotkeys-hook.esm.js

@@ -64,6 +64,7 @@ function useHotkeys(keys, callback, options, deps) {
   }, deps ? [ref, enableOnTags, filter].concat(deps) : [ref, enableOnTags, filter]);
   useEffect(function () {
     if (!enabled) {
+      hotkeys.unbind(keys, memoisedCallback);
       return;
     } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
 

package/dist/react-hotkeys-hook.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-hotkeys-hook.esm.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":";;;AAEA;;;;SAGgBA;AACd,SAAOC,OAAO,CAACC,SAAf;AACD;;ACDDD,OAAO,CAACE,MAAR,GAAiB;AAAA,SAAM,IAAN;AAAA,CAAjB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA4BC,YAA5B;MAAGC,cAAAA;AACnB,MAAMC,aAAa,GAAGD,MAAM,IAAKA,MAAsB,CAACE,OAAxD;AAEA,SAAOC,OAAO,CAAEF,aAAa,IAAIF,YAAjB,IAAiCA,YAAY,CAACK,QAAb,CAAsBH,aAAtB,CAAnC,CAAd;AACD,CAJD;;AAMA,IAAMI,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,EAAD;AACtC,SAAOR,SAAS,CAACQ,EAAD,EAAK,CAAC,OAAD,EAAU,UAAV,EAAsB,QAAtB,CAAL,CAAhB;AACD,CAFD;;AAmBA,SAAgBC,WAA8BC,MAAcC,UAAsBC,SAA2BC;AAC3G,MAAID,OAAO,YAAYE,KAAvB,EAA8B;AAC5BD,IAAAA,IAAI,GAAGD,OAAP;AACAA,IAAAA,OAAO,GAAGG,SAAV;AACD;;AAED,cAQIH,OAAkB,IAAI,EAR1B;AAAA,MACEX,YADF,SACEA,YADF;AAAA,MAEEF,MAFF,SAEEA,MAFF;AAAA,MAGEiB,KAHF,SAGEA,KAHF;AAAA,MAIEC,OAJF,SAIEA,OAJF;AAAA,oCAKEC,oBALF;AAAA,MAKEA,oBALF,sCAKyB,IALzB;AAAA,4BAMEC,OANF;AAAA,MAMEA,OANF,8BAMY,IANZ;AAAA,oCAOEC,uBAPF;AAAA,MAOEA,uBAPF,sCAO4B,KAP5B;;AASA,MAAMC,GAAG,GAAGC,MAAM,CAAW,IAAX,CAAlB;;AAGA,MAAMC,gBAAgB,GAAGC,WAAW,CAAC,UAACC,aAAD,EAA+BC,YAA/B;;;AACnC,QAAI3B,MAAM,IAAI,CAACA,MAAM,CAAC0B,aAAD,CAArB,EAAsC;AACpC,aAAO,CAACP,oBAAR;AACD;;;AAGD,QACGX,+BAA+B,CAACkB,aAAD,CAA/B,IAAkD,CAACzB,SAAS,CAACyB,aAAD,EAAgBxB,YAAhB,CAA7D,IACK,yBAAAwB,aAAa,CAACvB,MAAd,mCAAsCyB,iBAAtC,IAA2D,CAACP,uBAFnE,EAGE;AACA,aAAO,IAAP;AACD;;AAED,QAAIC,GAAG,CAACO,OAAJ,KAAgB,IAAhB,IAAwBC,QAAQ,CAACC,aAAT,KAA2BT,GAAG,CAACO,OAA3D,EAAoE;AAClEjB,MAAAA,QAAQ,CAACc,aAAD,EAAgBC,YAAhB,CAAR;AACA,aAAO,IAAP;AACD;;AAED,WAAO,KAAP;AACD,GAnBmC,EAmBjCb,IAAI,IAAIQ,GAAJ,EAASpB,YAAT,EAAuBF,MAAvB,SAAkCc,IAAlC,IAA0C,CAACQ,GAAD,EAAMpB,YAAN,EAAoBF,MAApB,CAnBb,CAApC;AAqBAgC,EAAAA,SAAS,CAAC;AACR,QAAI,CAACZ,OAAL,EAAc;AACZ;AACD;;;AAGD,QAAIH,KAAK,IAAIC,OAAO,KAAK,IAAzB,EAA+B;AAC5BL,MAAAA,OAAmB,CAACK,OAApB,GAA8B,KAA9B;AACF;;AAEDpB,IAAAA,OAAO,CAACa,IAAD,EAAQE,OAAmB,IAAI,EAA/B,EAAmCW,gBAAnC,CAAP;AAEA,WAAO;AAAA,aAAM1B,OAAO,CAACmC,MAAR,CAAetB,IAAf,EAAqBa,gBAArB,CAAN;AAAA,KAAP;AACD,GAbQ,EAaN,CAACA,gBAAD,EAAmBb,IAAnB,EAAyBS,OAAzB,CAbM,CAAT;AAeA,SAAOE,GAAP;AACD;;ICpFKY,eAAe,GAAGpC,OAAO,CAACC,SAAhC;;;;"}
+{"version":3,"file":"react-hotkeys-hook.esm.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n  return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n  const targetTagName = target && (target as HTMLElement).tagName;\n\n  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n  scope?: string; // Scope. Currently not doing anything.\n  keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n  keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n  if (options instanceof Array) {\n    deps = options;\n    options = undefined;\n  }\n\n  const {\n    enableOnTags,\n    filter,\n    keyup,\n    keydown,\n    filterPreventDefault = true,\n    enabled = true,\n    enableOnContentEditable = false,\n  } = options as Options || {};\n  const ref = useRef<T | null>(null);\n\n  // The return value of this callback determines if the browsers default behavior is prevented.\n  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n    if (filter && !filter(keyboardEvent)) {\n      return !filterPreventDefault;\n    }\n\n    // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n    if (\n      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n    ) {\n      return true;\n    }\n\n    if (ref.current === null || document.activeElement === ref.current) {\n      callback(keyboardEvent, hotkeysEvent);\n      return true;\n    }\n\n    return false;\n  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n  useEffect(() => {\n    if (!enabled) {\n      hotkeys.unbind(keys, memoisedCallback);\n\n      return;\n    }\n\n    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n    if (keyup && keydown !== true) {\n      (options as Options).keydown = false;\n    }\n\n    hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n    return () => hotkeys.unbind(keys, memoisedCallback);\n  }, [memoisedCallback, keys, enabled]);\n\n  return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hotkeys-hook",
-  "version": "3.4.0",
+  "version": "3.4.4",
   "repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git",
   "homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",
   "author": "Johannes Klauss",
@@ -28,9 +28,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "jest",
-    "publish": "np",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build"
+    "publish": "np"
   },
   "babel": {
     "presets": [
@@ -59,27 +57,26 @@
     "hotkeys-js": "3.8.7"
   },
   "devDependencies": {
-    "@babel/core": "7.14.8",
+    "@babel/core": "7.15.8",
     "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/preset-env": "7.14.8",
+    "@babel/preset-env": "7.15.8",
     "@babel/preset-react": "7.14.5",
-    "@babel/preset-typescript": "7.14.5",
-    "@testing-library/react": "12.0.0",
-    "@testing-library/react-hooks": "7.0.1",
-    "@testing-library/user-event": "13.2.0",
-    "@types/jest": "26.0.24",
-    "@types/react": "17.0.14",
+    "@babel/preset-typescript": "7.15.0",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.4.1",
+    "@types/jest": "27.0.1",
+    "@types/react": "17.0.30",
     "@types/react-dom": "17.0.9",
-    "docz": "2.3.1",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-prettier": "4.0.0",
     "jest": "26.6.3",
-    "prettier": "2.3.2",
+    "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "tsdx": "0.14.1",
-    "tslib": "2.3.0",
-    "typescript": "4.3.5"
+    "tslib": "2.3.1",
+    "typescript": "4.4.4"
   },
   "peerDependencies": {
     "react": ">=16.8.1",

package/src/index.test.tsx

@@ -226,5 +226,5 @@ test('useHotkeys should unbind the hotkey when enabled is set from true to false
 
   rerender(false);
 
-  expect(hotkeys.unbind).toHaveBeenCalledTimes(1)
+  expect(hotkeys.unbind).toHaveBeenCalledTimes(2)
 })

package/src/useHotkeys.ts

@@ -72,6 +72,8 @@ export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler
 
   useEffect(() => {
     if (!enabled) {
+      hotkeys.unbind(keys, memoisedCallback);
+
       return;
     }