React Keyboard hot keys Hooks

hot-keys.hook.ts

import { useEffect } from "react";
import hotkeys from "hotkeys-js";
// Types
import type { KeyHandler } from "hotkeys-js";

/**
 * Filter function to ignore hotkeys when typing in an input, textarea or select
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */
hotkeys.filter = (event: KeyboardEvent) => {
  const target = (event.target || event.srcElement) as HTMLElement;
  
  const { tagName } = target;
  let flag = true;
  
  // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
  if (
    target.isContentEditable ||
    target.getAttribute("role") === "option" ||
    ((tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") &&
      "readOnly" in target &&
      !target.readOnly)
  ) {
    flag = false;
  }
  return flag;
};

/**
 * Hook to bind hotkeys
 * @description This hook binds a hotkey to a handler function and unbinds it when the component is unmounted or the hotkey changes
 * @param {string} key
 * @param {KeyHandler} handler
 * @example
 * useHotkeys('ctrl+shift+s', () => console.log('You pressed ctrl+shift+s'));
 * useHotkeys("b", () => {
 *  doWhatever();
 * });
 * useHotkeys("command+ctrl+shift+a", () => {
 *   doSomethingElse();
 * })
 */
const useHotkeys = (key: string, handler: KeyHandler) => {
  useEffect(() => {
    hotkeys(key, handler);
    
    return () => {
      hotkeys.unbind(key, handler);
    };
  }, [key, handler]);
};

export default useHotkeys;