React: How to implement keyboard shortcuts in React?

1import { useEffect } from "react";
2
3function useKeyboardShortcut(key: string, callback: () => void, modifiers = {
4  ctrl: false,
5  shift: false,
6  alt: false,
7}) {
8  useEffect(() => {
9    const handler = (e: KeyboardEvent) => {
10      if (
11        e.key === key &&
12        e.ctrlKey === modifiers.ctrl &&
13        e.shiftKey === modifiers.shift &&
14        e.altKey === modifiers.alt
15      ) {
16        e.preventDefault();
17        callback();
18      }
19    };
20
21    document.addEventListener("keydown", handler);
22    return () => document.removeEventListener("keydown", handler);
23  }, [key, callback, modifiers]);
24}
25
26// Usage
27function Editor() {
28  const [saved, setSaved] = useState(false);
29
30  useKeyboardShortcut("s", () => {
31    setSaved(true);
32    setTimeout(() => setSaved(false), 2000);
33  }, { ctrl: true });
34
35  useKeyboardShortcut("z", () => {
36    undo();
37  }, { ctrl: true });
38
39  return (
40    <div>
41      <p>Press Ctrl+S to save</p>
42      {saved && <span>Saved!</span>}
43    </div>
44  );
45}

1import { useHotkeys } from "react-hotkeys-hook";
2
3function Editor() {
4  useHotkeys("ctrl+s", () => save());
5  useHotkeys("ctrl+z", () => undo());
6  useHotkeys("ctrl+shift+z", () => redo());
7
8  return <textarea />;
9}