react-hotkeys-hook 3.4.1

package/CHANGELOG.md

@@ -0,0 +1,97 @@
+## [2.2.1] - 23-Jul-2020
+* Remove deprecated findDOMNode
+* Added useIsHotkeyPressed hook.
+
+## [2.2.0] - 23-Jul-2020
+* Return ref to scope hotkey
+* Fixed test for scopable ref feature
+
+## [2.1.4] - 30-Jun-2020
+* added updated readme to docz
+* Update README to reflect lack of filter scoping
+
+## [2.1.3] - 16-Apr-2020
+* Code cleanup
+* Overloaded function type, so that options does not have to be set when deps is used only.
+
+## [2.1.2] - 13-Apr-2020
+* Added tests
+
+## [2.1.1] - 05-Apr-2020
+* Fixed bug in 2.1.0 that every filter returns false that has no available tags given.
+
+## [2.1.0] - 04-Apr-2020
+* Added filter implementation
+
+## [2.0.1] - 04-Apr-2020
+* Update readme
+* Fixed Option Type
+
+## [2.0.0] - 04-Apr-2020
+* BC: Added more options Swapped deps and options param. Updated docz.
+
+## [1.6.1] - 27-Mar-2020
+* Directly use KeyHandler type from hotkeys-js
+
+## [1.6.0] - 09-Mar-2020
+* Add options parameter to useHotkeys hook
+
+## [1.5.4] - 09-Dec-2019
+* Updated docz.
+
+## [1.5.3] - 09-Sep-2019
+* make sure only memoisedCallback is unbound
+
+## [1.5.2] - 24-Aug-2019
+* Update readme.
+* Bump hotkeys version to 3.7.1
+
+## [1.5.1] - 21-Jul-2019
+* Update readme.
+
+## [1.5.0] - 21-Jul-2019
+* Callback gets memoised inside hook by default
+* Add memo deps array as third argument to hook
+
+## [1.4.0] - 03-Jun-2019
+* Add callback to useEffect deps to allow update of hotkeys when callback changes
+* This also fixes the stale state bug
+* Bump hotkeys version to 3.6.11
+
+## [1.3.4] - 11-May-2019
+* Bump hotkeys version to 3.6.8
+
+## [1.3.3] - 02-May-2019
+* Removed console.logs
+* tightened source
+* Updated docz
+
+## [1.3.0] - 06-Apr-2019
+* Fixed bind and unbind on every render
+* Updated docz to make it work with the new deps array
+
+## [1.2.0] - 30-Mar-2019
+* Updated hotkeys
+* Support for hotkeys 3.6
+* Fixed typos in docz
+
+## [1.1.1] - 20-Feb-2019
+* Updated examples in readme.md
+
+## [1.1.0] - 20-Feb-2019
+* BC: Renamed `useHotKeys` to `useHotkeys` to keep it identical with the hotkeys package
+* Switched to docz for documentation
+* Switched to pika for packaging and publishing
+
+## [1.0.3] - 13-Feb-2019
+* Bumped up hotkeys-js version to 3.4.4
+
+## [1.0.2] - 07-Feb-2019
+* Bumped up hotkeys-js version
+
+## [1.0.1] - 07-Feb-2019
+* Bumped peerDependencies for react and react-dom
+* Cleaned up repository
+
+## [0.1.2] - 15-Jan-2019
+* Initial release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Johannes Klauss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# react-hotkeys-hook
+React hook for using keyboard shortcuts in components.
+This is a hook version for the [hotkeys] package.
+
+## [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 & Live Examples](https://react-hotkeys-hook.vercel.app/)
+
+## [Support](https://github.com/JohannesKlauss/react-hotkeys-hook/discussions)
+
+### Installation
+
+```shell
+npm install react-hotkeys-hook
+```
+
+or
+
+```shell
+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
+```js
+export const ExampleComponent = () => {
+  const [count, setCount] = useState(0);
+  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1));
+    
+  return (
+    <p>
+      Pressed {count} times.
+    </p>
+  );
+};
+```
+
+The hook takes care of all the binding and unbinding for you.
+As soon as the component mounts into the DOM, the key stroke will be
+listened to. When the component unmounts it will stop listening.
+
+### Call Signature
+
+```typescript
+useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: any[] = [])
+```
+
+### Parameters
+- `keys: string`: Here you can set the key strokes you want the hook to listen to. You can use single or multiple keys,
+modifier combination, etc. See [this](https://github.com/jaywcjlove/hotkeys/#defining-shortcuts)
+section on the hotkeys documentation for more info.
+- `callback: (event: KeyboardEvent, handler: HotkeysEvent) => void`: Gets executed when the defined keystroke
+gets hit by the user. **Important:** Since version 1.5.0 this callback gets memoised inside the hook. So you don't have
+to do this anymore by yourself.
+- `options: Options = {}`
+  - `filter: (event: KeyboardEvent): boolean` is used to filter if a callback gets triggered depending on the keyboard event.
+    **Breaking Change in `3.0.0`!** Prior to version `3.0.0` the filter settings was one global setting that applied to every
+    hook. Since `3.0.0` this behavior changed. The `filter` option is now locally scoped to each call of `useHotkeys`.
+  - `filterPreventDefault: boolean` is used to prevent/allow the default browser behavior for the keystroke when the filter return false (default value: `true`)
+  - `enableOnTags: string[]` is used to enable listening to hotkeys in form fields. Available values are `INPUT`, `TEXTAREA` and `SELECT`.
+  - `splitKey: string` is used to change the splitting character inside the keys argument. Default is `+`, but if you want
+    to listen to the `+` character, you can set `splitKey` to i.e. `-` and listen for `ctrl-+`
+  - `keyup: boolean` Determine if you want to listen on the keyup event
+  - `keydown: boolean` Determine if want to listen on the keydown event
+  - `enabled: boolean` is used to prevent installation of the hotkey when set to false (default value: `true`)
+- `deps: any[] = []`: The dependency array that gets appended to the memoisation of the callback. Here you define the inner
+dependencies of your callback. If for example your callback actions depend on a referentially unstable value or a value
+that will change over time, you should add this value to your deps array. Since most of the time your callback won't
+depend on any unstable callbacks or changing values over time you can leave this value alone since it will be set to an
+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
+
+The `useIsHotkeyPressed` hook just returns the `hotkeys.isPressed` function and works exactly the same.
+
+```ts
+const isPressed = useIsHotkeyPressed();
+
+isPressed('return'); // Returns true if Return key is pressed down.
+```
+
+### Found an issue or have a feature request?
+
+Open up an issue or pull request and participate.
+
+### 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
+
+### Authors
+
+* Johannes Klauss
+
+### Contributors
+
+* [bernatmv](https://github.com/bernatmv)
+* [wheeler](https://github.com/wheeler)
+* [louisrli](https://github.com/louisrli)
+* [jameschao](https://github.com/jameschao)
+* [hmafzal](https://github.com/hmafzal)
+* [godspeedelbow](https://github.com/godspeedelbow)
+* [JoshuaKGoldberg](https://github.com/JoshuaKGoldberg)
+* [ggascoigne](https://github.com/ggascoigne)
+
+---
+
+MIT License.
+
+---
+
+[hotkeys]: https://github.com/jaywcjlove/hotkeys

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { useIsHotkeyPressed } from './useIsHotkeyPressed';
+import { useHotkeys, Options } from './useHotkeys';
+declare const isHotkeyPressed: {
+    (keyCode: number): boolean;
+    (keyCode: string): boolean;
+};
+export { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-hotkeys-hook.cjs.production.min.js')
+} else {
+  module.exports = require('./react-hotkeys-hook.cjs.development.js')
+}

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

@@ -0,0 +1,92 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var hotkeys = _interopDefault(require('hotkeys-js'));
+var react = require('react');
+
+/**
+ * @deprecated Use isHotkeyPressed instead. Will be removed version 4.
+ */
+
+function useIsHotkeyPressed() {
+  return hotkeys.isPressed;
+}
+
+hotkeys.filter = function () {
+  return true;
+};
+
+var tagFilter = function tagFilter(_ref, enableOnTags) {
+  var target = _ref.target;
+  var targetTagName = target && target.tagName;
+  return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
+};
+
+var isKeyboardEventTriggeredByInput = function isKeyboardEventTriggeredByInput(ev) {
+  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);
+};
+
+function useHotkeys(keys, callback, options, deps) {
+  if (options instanceof Array) {
+    deps = options;
+    options = undefined;
+  }
+
+  var _ref2 = options || {},
+      enableOnTags = _ref2.enableOnTags,
+      filter = _ref2.filter,
+      keyup = _ref2.keyup,
+      keydown = _ref2.keydown,
+      _ref2$filterPreventDe = _ref2.filterPreventDefault,
+      filterPreventDefault = _ref2$filterPreventDe === void 0 ? true : _ref2$filterPreventDe,
+      _ref2$enabled = _ref2.enabled,
+      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+      _ref2$enableOnContent = _ref2.enableOnContentEditable,
+      enableOnContentEditable = _ref2$enableOnContent === void 0 ? false : _ref2$enableOnContent;
+
+  var ref = react.useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
+
+  var memoisedCallback = react.useCallback(function (keyboardEvent, hotkeysEvent) {
+    var _keyboardEvent$target;
+
+    if (filter && !filter(keyboardEvent)) {
+      return !filterPreventDefault;
+    } // 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.
+
+
+    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable && !enableOnContentEditable) {
+      return true;
+    }
+
+    if (ref.current === null || document.activeElement === ref.current) {
+      callback(keyboardEvent, hotkeysEvent);
+      return true;
+    }
+
+    return false;
+  }, deps ? [ref, enableOnTags, filter].concat(deps) : [ref, enableOnTags, filter]);
+  react.useEffect(function () {
+    if (!enabled) {
+      return;
+    } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
+
+
+    if (keyup && keydown !== true) {
+      options.keydown = false;
+    }
+
+    hotkeys(keys, options || {}, memoisedCallback);
+    return function () {
+      return hotkeys.unbind(keys, memoisedCallback);
+    };
+  }, [memoisedCallback, keys, enabled]);
+  return ref;
+}
+
+var isHotkeyPressed = hotkeys.isPressed;
+
+exports.isHotkeyPressed = isHotkeyPressed;
+exports.useHotkeys = useHotkeys;
+exports.useIsHotkeyPressed = useIsHotkeyPressed;
+//# sourceMappingURL=react-hotkeys-hook.cjs.development.js.map

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

@@ -0,0 +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;;;;;;"}

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

@@ -0,0 +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};
+//# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,86 @@
+import hotkeys from 'hotkeys-js';
+import { useRef, useCallback, useEffect } from 'react';
+
+/**
+ * @deprecated Use isHotkeyPressed instead. Will be removed version 4.
+ */
+
+function useIsHotkeyPressed() {
+  return hotkeys.isPressed;
+}
+
+hotkeys.filter = function () {
+  return true;
+};
+
+var tagFilter = function tagFilter(_ref, enableOnTags) {
+  var target = _ref.target;
+  var targetTagName = target && target.tagName;
+  return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
+};
+
+var isKeyboardEventTriggeredByInput = function isKeyboardEventTriggeredByInput(ev) {
+  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);
+};
+
+function useHotkeys(keys, callback, options, deps) {
+  if (options instanceof Array) {
+    deps = options;
+    options = undefined;
+  }
+
+  var _ref2 = options || {},
+      enableOnTags = _ref2.enableOnTags,
+      filter = _ref2.filter,
+      keyup = _ref2.keyup,
+      keydown = _ref2.keydown,
+      _ref2$filterPreventDe = _ref2.filterPreventDefault,
+      filterPreventDefault = _ref2$filterPreventDe === void 0 ? true : _ref2$filterPreventDe,
+      _ref2$enabled = _ref2.enabled,
+      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+      _ref2$enableOnContent = _ref2.enableOnContentEditable,
+      enableOnContentEditable = _ref2$enableOnContent === void 0 ? false : _ref2$enableOnContent;
+
+  var ref = useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
+
+  var memoisedCallback = useCallback(function (keyboardEvent, hotkeysEvent) {
+    var _keyboardEvent$target;
+
+    if (filter && !filter(keyboardEvent)) {
+      return !filterPreventDefault;
+    } // 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.
+
+
+    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable && !enableOnContentEditable) {
+      return true;
+    }
+
+    if (ref.current === null || document.activeElement === ref.current) {
+      callback(keyboardEvent, hotkeysEvent);
+      return true;
+    }
+
+    return false;
+  }, deps ? [ref, enableOnTags, filter].concat(deps) : [ref, enableOnTags, filter]);
+  useEffect(function () {
+    if (!enabled) {
+      return;
+    } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
+
+
+    if (keyup && keydown !== true) {
+      options.keydown = false;
+    }
+
+    hotkeys(keys, options || {}, memoisedCallback);
+    return function () {
+      return hotkeys.unbind(keys, memoisedCallback);
+    };
+  }, [memoisedCallback, keys, enabled]);
+  return ref;
+}
+
+var isHotkeyPressed = hotkeys.isPressed;
+
+export { isHotkeyPressed, useHotkeys, useIsHotkeyPressed };
+//# sourceMappingURL=react-hotkeys-hook.esm.js.map

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

@@ -0,0 +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;;;;"}

package/dist/useHotkeys.d.ts

@@ -0,0 +1,18 @@
+import hotkeys, { KeyHandler } from 'hotkeys-js';
+import React from 'react';
+declare type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';
+export declare type Options = {
+    enabled?: boolean;
+    filter?: typeof hotkeys.filter;
+    filterPreventDefault?: boolean;
+    enableOnTags?: AvailableTags[];
+    enableOnContentEditable?: boolean;
+    splitKey?: string;
+    scope?: string;
+    keyup?: boolean;
+    keydown?: boolean;
+};
+export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;
+export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;
+export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;
+export {};

package/dist/useIsHotkeyPressed.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @deprecated Use isHotkeyPressed instead. Will be removed version 4.
+ */
+export declare function useIsHotkeyPressed(): {
+    (keyCode: number): boolean;
+    (keyCode: string): boolean;
+};

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "react-hotkeys-hook",
+  "version": "3.4.1",
+  "repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git",
+  "homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",
+  "author": "Johannes Klauss",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/react-hotkeys-hook.esm.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "hook",
+    "hooks",
+    "component",
+    "hotkey",
+    "shortcut",
+    "keyboard",
+    "shortcuts",
+    "keypress",
+    "hotkeys"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "jest",
+    "publish": "np"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-typescript",
+      "@babel/preset-react"
+    ]
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./setupTests.js"
+    ],
+    "testPathIgnorePatterns": [
+      "pkg",
+      ".docz",
+      "docs"
+    ]
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "dependencies": {
+    "hotkeys-js": "3.8.7"
+  },
+  "devDependencies": {
+    "@babel/core": "7.15.5",
+    "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@babel/preset-env": "7.15.6",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
+    "@testing-library/react": "12.1.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.2.1",
+    "@types/jest": "27.0.1",
+    "@types/react": "17.0.24",
+    "@types/react-dom": "17.0.9",
+    "eslint-plugin-prettier": "4.0.0",
+    "jest": "26.6.3",
+    "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.1",
+    "typescript": "4.4.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.1",
+    "react-dom": ">=16.8.1"
+  }
+}

package/src/index.test.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { useHotkeys } from './index';
+import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import hotkeys from 'hotkeys-js';
+
+const HotkeysOnInput = ({ onPress, useTags }: { onPress: () => void, useTags?: boolean }) => {
+  useHotkeys('a', onPress, { enableOnTags: useTags ? ['INPUT'] : undefined });
+
+  return (
+    <input type='text' data-testid={'input'} />
+  );
+};
+
+const HotkeysFilteredOnInput = ({ onPress, useTags }: { onPress: () => void, useTags?: boolean }) => {
+  useHotkeys('a', onPress, { enableOnTags: useTags ? ['TEXTAREA'] : undefined });
+
+  return (
+    <input type='text' data-testid={'input'} />
+  );
+};
+
+const HotkeysOnKeyup = ({ onPress, keyup, keydown }: { onPress: () => void, keyup?: boolean, keydown?: boolean }) => {
+  useHotkeys('a', onPress, { keyup, keydown });
+
+  return (
+    <input type='text' data-testid={'input'} />
+  );
+};
+
+const HotkeysWithRef = ({ onPress }: { onPress: () => void }) => {
+  const ref = useHotkeys<HTMLElement>('a', onPress);
+
+  return (
+    <section ref={ref} tabIndex={0} data-testid={'container'}>
+      <input type='text' data-testid={'input'} />
+    </section>
+  );
+};
+
+test('useHotkeys should only fire when element is focused if a ref is set.', () => {
+  const onPress = jest.fn();
+
+  render(<HotkeysWithRef onPress={onPress} />);
+
+  userEvent.keyboard('A');
+
+  expect(onPress).not.toBeCalled();
+
+  userEvent.click(screen.getByTestId('container'));
+  userEvent.keyboard('A');
+
+  expect(onPress).toBeCalled();
+});
+
+test('useHotkeys should listen to key presses', () => {
+  const callback = jest.fn();
+
+  renderHook(() => useHotkeys('a', callback));
+
+  userEvent.keyboard('A');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+test('useHotkeys correctly assign deps when used as third argument and options being omitted', async () => {
+  let count = 0;
+  const callback = jest.fn();
+
+  renderHook(() => useHotkeys('a', () => callback(++count), [count]));
+
+  userEvent.keyboard('A');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+  expect(callback.mock.calls[0][0]).toEqual(1);
+
+  userEvent.keyboard('A');
+
+  expect(callback).toHaveBeenCalledTimes(2);
+  expect(callback.mock.calls[1][0]).toEqual(2);
+});
+
+test('useHotkeys should use correct char to split combinations', () => {
+  const callback = jest.fn();
+
+  renderHook(() => useHotkeys('Shift-A', callback, { splitKey: '-' }));
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(2);
+});
+
+test('useHotkeys should use correctly assign options and deps argument when using all four arguments', () => {
+  const callback = jest.fn();
+
+  renderHook(() => useHotkeys('shift-a', callback, { splitKey: '-' }, []));
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(2);
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(3);
+});
+
+test('useHotkeys should only trigger once if neither keyup nor keydown are set', () => {
+  const onPress = jest.fn();
+
+  render(<HotkeysOnKeyup onPress={onPress} />);
+
+  fireEvent.keyUp(document.body, { key: 'a', keyCode: 65 });
+
+  expect(onPress).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document.body, { key: 'a', keyCode: 65 });
+
+  expect(onPress).toHaveBeenCalled();
+});
+
+test('useHotkeys should only trigger once if keyup is set and keydown is not', () => {
+  const onPress = jest.fn();
+
+  render(<HotkeysOnKeyup onPress={onPress} keyup={true} />);
+
+  fireEvent.keyDown(document.body, { key: 'a', keyCode: 65 });
+
+  expect(onPress).not.toHaveBeenCalled();
+
+  fireEvent.keyUp(document.body, { key: 'a', keyCode: 65 });
+
+  expect(onPress).toHaveBeenCalled();
+});
+
+test('useHotkeys should trigger twice if keyup and keydown is set to true', () => {
+  let called = false;
+
+  render(<HotkeysOnKeyup onPress={() => called = true} keyup={true} keydown={true} />);
+
+  userEvent.keyboard('A');
+
+  expect(called).toBe(true);
+
+  userEvent.keyboard('A');
+
+  expect(called).toBe(true);
+});
+
+test('useHotkeys should be enabled on given form tags', async () => {
+  const onPress = jest.fn();
+  render(<HotkeysOnInput onPress={onPress} useTags={true} />);
+
+  const input = document.querySelector('input');
+
+  expect(input).not.toBe(null);
+
+  userEvent.keyboard('A');
+
+  expect(onPress).toHaveBeenCalled();
+});
+
+test('useHotkeys should not be enabled on given form tags when filter specifies different input field', async () => {
+  const onPress = jest.fn();
+  render(<HotkeysFilteredOnInput onPress={onPress} useTags={true} />);
+
+  userEvent.type(screen.getByRole('textbox'), 'A');
+
+  expect(onPress).toHaveBeenCalledTimes(0);
+});
+
+test('useHotkeys should not be enabled on given form tags when tags is not set', async () => {
+  const onPress = jest.fn();
+  render(<HotkeysFilteredOnInput onPress={onPress} useTags={false} />);
+
+  userEvent.type(screen.getByRole('textbox'), 'A');
+
+  expect(onPress).toHaveBeenCalledTimes(0);
+});
+
+test('useHotkeys should use its own custom filter system instead of the global hotkeys one', () => {
+  const callback = jest.fn();
+  const { rerender } = renderHook((returnFilterVal: boolean = false) => useHotkeys('a', callback, { filter: () => returnFilterVal }));
+
+  userEvent.keyboard('A');
+
+  expect(callback).not.toHaveBeenCalled();
+
+  rerender(true);
+
+  userEvent.keyboard('A');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+test('useHotkeys should not be enabled when enabled flag is set to false', () => {
+  const callback = jest.fn();
+
+  const { rerender } = renderHook((enabled: boolean = false) => useHotkeys('a', callback, { enabled }));
+
+  userEvent.keyboard('A');
+
+  expect(callback).not.toHaveBeenCalled();
+
+  rerender(true);
+
+  userEvent.keyboard('A');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+test('useHotkeys should unbind the hotkey when enabled is set from true to false', () => {
+  hotkeys.unbind = jest.fn();
+
+  const { rerender } = renderHook((enabled: boolean = true) => useHotkeys('a', () => true, { enabled }));
+
+  expect(hotkeys.unbind).not.toHaveBeenCalled()
+
+  rerender(false);
+
+  expect(hotkeys.unbind).toHaveBeenCalledTimes(2)
+})

package/src/index.ts

@@ -0,0 +1,7 @@
+import { useIsHotkeyPressed } from './useIsHotkeyPressed';
+import { useHotkeys, Options } from './useHotkeys';
+import hotkeys from 'hotkeys-js';
+
+const isHotkeyPressed = hotkeys.isPressed;
+
+export { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };

package/src/useHotkeys.ts

@@ -0,0 +1,91 @@
+import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';
+
+// We implement our own custom filter system.
+hotkeys.filter = () => true;
+
+const tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {
+  const targetTagName = target && (target as HTMLElement).tagName;
+
+  return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));
+};
+
+const isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {
+  return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);
+};
+
+export type Options = {
+  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)
+  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)
+  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)
+  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])
+  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)
+  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)
+  scope?: string; // Scope. Currently not doing anything.
+  keyup?: boolean; // Trigger on keyup event? (Default: undefined)
+  keydown?: boolean; // Trigger on keydown event? (Default: true)
+};
+
+export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;
+export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;
+export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;
+export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {
+  if (options instanceof Array) {
+    deps = options;
+    options = undefined;
+  }
+
+  const {
+    enableOnTags,
+    filter,
+    keyup,
+    keydown,
+    filterPreventDefault = true,
+    enabled = true,
+    enableOnContentEditable = false,
+  } = options as Options || {};
+  const ref = useRef<T | null>(null);
+
+  // The return value of this callback determines if the browsers default behavior is prevented.
+  const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {
+    if (filter && !filter(keyboardEvent)) {
+      return !filterPreventDefault;
+    }
+
+    // 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.
+    if (
+      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))
+      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)
+    ) {
+      return true;
+    }
+
+    if (ref.current === null || document.activeElement === ref.current) {
+      callback(keyboardEvent, hotkeysEvent);
+      return true;
+    }
+
+    return false;
+  }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);
+
+  useEffect(() => {
+    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.
+    if (keyup && keydown !== true) {
+      (options as Options).keydown = false;
+    }
+
+    hotkeys(keys, (options as Options) || {}, memoisedCallback);
+
+    return () => hotkeys.unbind(keys, memoisedCallback);
+  }, [memoisedCallback, keys, enabled]);
+
+  return ref;
+}

package/src/useIsHotkeyPressed.ts

@@ -0,0 +1,8 @@
+import hotkeys from 'hotkeys-js';
+
+/**
+ * @deprecated Use isHotkeyPressed instead. Will be removed version 4.
+ */
+export function useIsHotkeyPressed() {
+  return hotkeys.isPressed;
+}