useKeyboardKey

A hook that runs a callback whenever a specific keyboard key is pressed, and cleans up the listener automatically.

The hook

useKeyboardKey.ts

import { useEffect } from 'react';

export const useKeyboardKey = ({
  key,
  action,
}: {
  key: string;
  action: () => void;
}) => {
  useEffect(() => {
    const callback = (e: Event) => {
      const event = e as unknown as KeyboardEvent;
      if (event.code.toLowerCase() === key.toLowerCase()) {
        action();
      }
    };

    document.addEventListener('keydown', callback);

    return () => {
      document.removeEventListener('keydown', callback);
    };
  }, [action, key]);
};

Try it

Click anywhere on this page, then press Escape:

Waiting...