Skip to main content

useKeyDown

ref를 전달한 요소가 포커싱된 상태에서 keydown 이벤트 발생 시 keyDownCallbackMap로 지정한 key에 트리거되어 콜백 함수를 호출합니다.

keyDownCallbackMap의 key는 KeyboardEvent.key가 반환하는 값이 들어가야 합니다.

만약 모든 KeyboardEvent.key에 대해 콜백 함수를 호출하고 싶다면 allKeyDownCallback props를 이용 할 수 있습니다.

  • 💡 allKeyDownCallback이 존재 할 경우 keyDownCallbackMap으로 지정한 콜백 함수는 무시합니다.

enabled 옵션을 통해 원하는 조건에 keydown 이벤트를 바인딩 할 수 있습니다.

targetRef가 할당되지 않으면 기본적으로 window에 이벤트가 바인딩 됩니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
interface UseKeyDownProps {
  enabled?: boolean; // default: true
  keyDownCallbackMap?: Partial<KeyDownCallbackMap>; // default: {}
  allKeyDownCallback?: (event: KeyboardEvent) => void;
}
typescript
function useKeyDown({
  enabled,
  keyDownCallbackMap,
  allKeyDownCallback,
}: UseKeyDownProps): RefObject<Window>;

function useKeyDown<T extends HTMLElement>({
  enabled,
  keyDownCallbackMap,
  allKeyDownCallback,
}: UseKeyDownProps): RefObject<T>;

function useKeyDown<T extends HTMLElement>({
  enabled,
  keyDownCallbackMap,
  allKeyDownCallback,
}: UseKeyDownProps): RefObject<Window | T>

Usage​

AllKeyDownCallback​

  • 모든 키가 눌렸을 때 호출될 공통 콜백 함수입니다.
typescript
import { useKeyDown } from '@modern-kit/react';

const Example = () => {
  const targetRef = useKeyDown<HTMLButtonElement>({
    enabled: true, // default: true
    allKeyDownCallback: (event) => console.log('All Key', event.key)
  });

  return <button ref={targetRef}>버튼</button>;
};

KeyDownCallbackMap​

  • 특정 키에 해당하는 콜백을 매핑하고, 해당 키가 눌렸을 때 호출될 콜백 함수들을 호출합니다.
typescript
import { useKeyDown } from '@modern-kit/react';

const Example = () => {
  const targetRef = useKeyDown<HTMLButtonElement>({
    enabled: true, // default: true
    keyDownCallbackMap: {
      Enter: (event) => console.log('Enter', event.key), 
      Shift: (event) => console.log('Shift', event.key),
      ' ': (event) => console.log('Space', event.key),
    }
  });

  return <button ref={targetRef}>버튼</button>;
};

Note​