Added ability to use useHotkeys inside and iframe (#23)

* Added a optional argument to accept the document of the iframe

* Added the readme for the new prop

* Updated the readme

Author: soorajbhaskaran

README.md

@@ -1,7 +1,7 @@
 # @bigbinary/neeto-hotkeys
 
-The `neeto-hotkeys` package provides the `useHotKeys` hook, a versatile utility for managing hotkeys in an application. 
-This hook allows you to define specific hotkey combinations and associate them with corresponding handler functions. 
+The `neeto-hotkeys` package provides the `useHotKeys` hook, a versatile utility for managing hotkeys in an application.
+This hook allows you to define specific hotkey combinations and associate them with corresponding handler functions.
 The associated handler is invoked upon pressing the configured hotkey(s), enabling you to execute actions in response to keyboard input.
 
 ## Installation
@@ -56,6 +56,8 @@ yarn add @bigbinary/neeto-hotkeys
   3.  enabled: By default its value will be `true`. Setting this to `false` will
       not register the hotkey.
 
+- `externalDocument`: This is an optional argument. If you want to listen for hotkeys on an external document (e.g., an iframe), pass the reference of that document as the 4th argument for useHotKeys hook. If you do not provide this argument, the hook will listen for hotkeys on the current document by default.
+
 ### Return value:
 
 - `inputRef`: A `ref` which needs to be attached to the input element to be
@@ -86,4 +88,3 @@ Hotkeys are a fundamental aspect of many applications, enhancing user efficiency
 and interactivity. The useHotKeys hook simplifies the implementation of these
 hotkeys by allowing you to specify the hotkey combinations in various formats,
 associated handlers, and configuration options.
-

src/index.js

@@ -9,7 +9,7 @@ import {
   unBindHotKey,
 } from "src/utils";
 
-const useHotKeys = (hotkey, handler, userConfig) => {
+const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
   const ref = useRef(null);
   const convertedHotkey = convertHotkeyToUsersPlatform(hotkey);
   const config = mergeLeft(userConfig, DEFAULT_CONFIG);
@@ -26,6 +26,7 @@ const useHotKeys = (hotkey, handler, userConfig) => {
       hotkey: convertedHotkey,
       handler,
       ref,
+      externalDocument,
     });
 
     return () => {

src/utils.js

@@ -31,18 +31,30 @@ export const convertHotkeyToUsersPlatform = hotkey => {
   return convertHotKeyToWindows(hotkey);
 };
 
-export const bindHotKey = ({ mode, hotkey, handler, ref }) => {
+export const bindHotKey = ({
+  mode,
+  hotkey,
+  handler,
+  ref,
+  externalDocument,
+}) => {
   let mousetrapInstance;
 
   switch (mode) {
     case MODES.global:
       Mousetrap.bindGlobal(hotkey, handler);
       break;
     case MODES.scoped:
-      mousetrapInstance = Mousetrap(ref.current).bind(hotkey, handler);
+      mousetrapInstance = Mousetrap(externalDocument ?? ref.current).bind(
+        hotkey,
+        handler
+      );
       break;
     default:
-      mousetrapInstance = Mousetrap.bind(hotkey, handler);
+      mousetrapInstance = Mousetrap(externalDocument ?? document).bind(
+        hotkey,
+        handler
+      );
   }
 
   return mousetrapInstance;