react快捷键hook

react快捷键hook

import {useCallback, useEffect} from 'react';

interface ShortcutConfig {
  keyCode: number;
  altKey?: boolean;
  shiftKey?: boolean;
  ctrlKey?: boolean;
  metaKey?: boolean; // Command键 (Mac)
  onPress: () => void;
  disabled?: boolean;
  preventDefault?: boolean;
  container?: HTMLDivElement | null; // 可选的容器元素，默认为 window
}
export const useKeyboardShortcut = ({
  keyCode,
  altKey = false,
  shiftKey = false,
  ctrlKey = false,
  metaKey = false,
  onPress,
  disabled = false,
  preventDefault = true,
  container,
}: ShortcutConfig) => {
  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      // 检查所有修饰键是否匹配
      if (
        event.keyCode === keyCode &&
        event.altKey === altKey &&
        event.shiftKey === shiftKey &&
        event.ctrlKey === ctrlKey &&
        event.metaKey === metaKey
      ) {
        if (preventDefault) {
          event.preventDefault();
        }

        if (!disabled) {
          onPress();
        }
      }
    },
    [keyCode, altKey, shiftKey, ctrlKey, metaKey, onPress, disabled, preventDefault],
  );

  useEffect(() => {
    if (disabled) return;
    const target = container || window;
    target.addEventListener('keydown', handleKeyDown);

    return () => {
      target.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown, disabled, container]);
};
/**
	使用案例
  useKeyboardShortcut({
    keyCode: 88,
    altKey: true,
    shiftKey: false,
    metaKey: false,
    onPress: handleClose,
    disabled: allItems.length === 0,
    container: containerRef.current,
  });
*/