A REACT HOOK to declare Mousetrap.js hotkey combo associated to a callback. Two effect hooks are needed as we don't want to bind mousetrap at every keystroke !

anyfile.js

// use it like this in your component

mouseTrapHook([
    {
      keys: "ctrl+enter", // any mousetrap combo, or array of combo
      action: () => { // triggered on key combo
        // whatever. You can use your state in there too.
      }
    }
  ]);
  
  // NOTE : if combo happens in a textarea or input, don't forget to add className="mousetrap" to it - or mousetrap will ignore it.

MousetrapHook.js

import mousetrap from "mousetrap";
import react, { useEffect, useState } from "react";

export default handlerMap => {
  const [index, setIndex] = useState(-1);
  useEffect(() => {
    handlerMap.map((handler, index) => {
      mousetrap.bind(handler.keys, () => setIndex(index));
    });
    return () => {
      handlerMap.map(handler => {
        mousetrap.unbind(handler.keys);
      });
    };
  }, []);

  useEffect(
    () => {
      if (index > -1) {
        handlerMap[index].action();
      }
      return () => {
        setIndex(-1);
      };
    },
    [index]
  );
};