React Hook Keypress Callback

useKeypress.ts

import { useEffect, useRef } from 'react';

type KeyboardRef = (event: KeyboardEvent) => void;

const useKeypress = (keys: string[], handler?: (e: KeyboardEvent) => void) => {
  const eventListenerRef = useRef<KeyboardRef | null>(null);

  useEffect(() => {
    eventListenerRef.current = (event: KeyboardEvent) => {
      if (Array.isArray(keys) ? keys.includes(event.key) : keys === event.key) {
        handler?.(event);
      }
    };
  }, [keys, handler]);

  useEffect(() => {
    const eventListener = (event: KeyboardEvent) => {
        if ( eventListenerRef ) {
            eventListenerRef.current?.(event);
        }
    };
    window.addEventListener('keydown', eventListener);
    return () => {
      window.removeEventListener('keydown', eventListener);
    };
  }, []);
};

export default useKeypress;