Function useKeyPress

packages/hooks/src/useKeyPress/index.ts:238–277

(
  keyFilter: KeyFilter,
  eventHandler: (event: KeyboardEvent, key: KeyType) => void,
  option?: Options,
)

const defaultEvents: KeyEvent[] = ['keydown'];

function useKeyPress(
  keyFilter: KeyFilter,
  eventHandler: (event: KeyboardEvent, key: KeyType) => void,
  option?: Options,
) {
  const { events = defaultEvents, target, exactMatch = false, useCapture = false } = option || {};
  const eventHandlerRef = useLatest(eventHandler);
  const keyFilterRef = useLatest(keyFilter);

  useDeepCompareEffectWithTarget(
    () => {
      const el = getTargetElement(target, window);
      if (!el) {
        return;
      }

      const callbackHandler = (event: Event) => {
        const keyEvent = event as KeyboardEvent;
        const genGuard = genKeyFormatter(keyFilterRef.current, exactMatch);
        const keyGuard = genGuard(keyEvent);
        const firedKey = isValidKeyType(keyGuard) ? keyGuard : keyEvent.key;

        if (keyGuard) {
          return eventHandlerRef.current?.(keyEvent, firedKey);
        }
      };

      for (const eventName of events) {
        el?.addEventListener?.(eventName, callbackHandler, useCapture);
      }
      return () => {
        for (const eventName of events) {
          el?.removeEventListener?.(eventName, callbackHandler, useCapture);
        }
      };
    },
    [events],
    target,
  );
}

export default useKeyPress;