Made build IE compliant. Added tests.

src/index.test.tsx

@@ -1,9 +1,9 @@
 import React, {useState} from "react";
-import {useHotkeys} from "./index";
+import {Options, useHotkeys} from "./index";
 import {act, renderHook} from "@testing-library/react-hooks";
 import { fireEvent } from "@testing-library/react";
 
-export default function useWrapper(keys: string) {
+function useWrapper(keys: string) {
   const [count, setCount] = useState(0);
   const increment = () => setCount((x) => x + 1);
 
@@ -12,6 +12,15 @@ export default function useWrapper(keys: string) {
   return count;
 }
 
+function useDeps(setDeps: boolean) {
+  const [count, setCount] = useState(0);
+  const increment = () => setCount(count + 1);
+
+  useHotkeys('a', increment, {}, setDeps ? [count] : []);
+
+  return count;
+}
+
 test('useHotkeys should listen to key presses', () => {
     const { result } = renderHook(() => useWrapper('a'));
 
@@ -39,3 +48,26 @@ test('useHotkeys should listen to its own context', function () {
   expect(resultA.result.current).toBe(1);
   expect(resultB.result.current).toBe(0);
 });
+
+test('useHotkeys should rebuild callback after deps change', function () {
+  const resultA = renderHook(() => useDeps(false));
+  const resultB = renderHook(() => useDeps(true));
+
+  act(() => {
+    fireEvent.keyDown(document.body, { key: 'a', keyCode: 65 });
+
+    return undefined;
+  });
+
+  expect(resultA.result.current).toBe(1);
+  expect(resultB.result.current).toBe(1);
+
+  act(() => {
+    fireEvent.keyDown(document.body, { key: 'a', keyCode: 65 });
+
+    return undefined;
+  });
+
+  expect(resultA.result.current).toBe(1);
+  expect(resultB.result.current).toBe(2);
+});

src/index.ts

@@ -3,7 +3,7 @@ import {useCallback, useEffect, useMemo} from "react";
 
 type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';
 
-type Options = {
+export type Options = {
   filter?: typeof hotkeys.filter;
   enableOnTags?: AvailableTags[];
   splitKey?: string;
@@ -15,13 +15,13 @@ type Options = {
 export function useHotkeys(
   keys: string,
   callback: KeyHandler,
-  options: Options = {},
-  deps: any[] = [],
+  options?: Options,
+  deps?: any[],
 ) {
-  const memoisedCallback = useCallback(callback, deps);
+  const memoisedCallback = useCallback(callback, deps || []);
 
   useEffect(() => {
-    if (options.enableOnTags) {
+    if (options && options.enableOnTags) {
       hotkeys.filter = ({target, srcElement}) => {
         // @ts-ignore
         const targetTagName = (target && target.tagName) || (srcElement && srcElement.tagName);
@@ -30,9 +30,9 @@ export function useHotkeys(
       };
     }
 
-    if (options.filter) hotkeys.filter = options.filter;
+    if (options && options.filter) hotkeys.filter = options.filter;
 
-    hotkeys(keys, options, memoisedCallback);
+    hotkeys(keys, options || {}, memoisedCallback);
 
     return () => hotkeys.unbind(keys, memoisedCallback);
   }, [memoisedCallback, options]);

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ES2020",
     "module": "ESNext",
     "moduleResolution": "node",
     "jsx": "react",