レスポンスフック: useKeydown ()

import useKeyDown from "hooks/useKeyDown";
...
const SomeComponent = () => {
  useKeyDown("Escape", onClose);
...

import { useEffect } from "react";

// https://stackoverflow.com/questions/37440408
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
// Example: useKeyDown("Escape", onClose);
const useKeyDown = (key: string, onKeyDown: () => void) => {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === key) onKeyDown();
      // or: event.Code === keyCode
    };

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
};

export default useKeyDown;