Components
Actions
Shortcuts

Shortcuts

Use this library : https://www.npmjs.com/package/hotkeys-js

In the code

  • Import the package import hotkeys from "hotkeys-js";

  • Call the function hotkeys with the keys you need

hotkeys("n", function (event, handler) {
        event.preventDefault();
        if (event.type === "keydown") {
          actionToRun();
        }
        hotkeys.unbind("n");
        return false;
 });
  • Put that function in a useEffect with every variable that should be defined before the shortcut use is valid
useEffect(() => {
    if (userEmployeeId && userEmployeeId !== "-1") {
      hotkeys.unbind("n");
      hotkeys("n", function (event, handler) {
        event.preventDefault();
        if (event.type === "keydown") {
          handleSubmit(form.getValues());
        }
        hotkeys.unbind("n");
        return false;
      });
    }
  }, [userEmployeeId]);

*** Very important !!! *** If a variable is not set before the hotkeys's function the variable will never be set so there will be some errors