[URH-55 ] useKeyCombination 신규

[suhyeoonn]

👾 Pull Request

• 티켓: useKeyCombination 신규

• 상태: 신규 (테스트 코드는 아직 작성 중입니다!)

1️⃣ Spec

• 지정된 키 조합이 눌렸을 때 콜백 함수를 호출하는 훅

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

import { useCallback, useRef, useState } from 'react';
import useKeyCombination from './hooks/useKeyCombination';

function App() {
  const [bold, setBold] = useState(false);
  const [isSave, setIsSave] = useState(false);
  const input = useRef<HTMLInputElement>(null);

  const toggleBold = useCallback(() => {
    setBold((state) => !state);
  }, [setBold]);

  const keyActions = {
    toggleBold: {
      shortcutKeys: ['ControlLeft', 'KeyB'],
      callback: toggleBold,
    },
    save: {
      shortcutKeys: ['MetaLeft', 'KeyS'],
      callback: useCallback(() => setIsSave((state) => !state), [setIsSave]),
      isPrevent: true,
    },
    search: {
      shortcutKeys: ['MetaLeft', 'KeyK'],
      callback: useCallback(() => input.current?.focus(), []),
    },
  };

  useKeyCombination(keyActions.toggleBold);
  useKeyCombination(keyActions.save);
  useKeyCombination(keyActions.search);

  return (
    <div>
      <input type="text" ref={input} placeholder="Press command + K" />
      <div>USE-REACT-HOOKS</div>
      <ul>
        <li style={{ fontWeight: bold ? 'bold' : 'normal' }}>
          command + B : Bold
        </li>
        <li>command + S: {isSave ? 'SAVE!' : 'Not saved yet'}</li>
      </ul>
    </div>
  );
}

export default App;

4️⃣ 관련 문서 (선택 사항)

• Why does Javascript drop keyUp events when the metaKey is pressed on Mac browsers?
• Keyup event not firing when meta key is held (Mac OSX only?) - How to handle in javascript?
  • mac 환경인 경우, meta(command)키를 누른 상태에서는 keyup 이벤트가 발생하지 않습니다.

[foresec]

수고하셨습니다👍😊

[jeongbaebang]

👍

[foresec]

수고많으셨습니다😊👍