Reactでキー入力を受け付ける

React

2022.05.28 2022.05.27

Reactを使っていて「キー入力をinput等を介さずに受け付けたい」というときが稀にあります。

こういった場合、useCallbackでkeyEventを受け取る関数を定義しておき、listenerをuseEffectでstateに依存させながら追加します。

この際、cleanupの処理(removeEventLister)を記述しておかないとeventが重複するため注意が必要です。(参考: 副作用フックの利用方法)

const handleKeyEvent = useCallback(
    (event) => {
      let keyName = event.key;
      switch (keyName) {
        case "Enter":
          setText("");
          break;
        default:
          setText(`${text}-${keyName}`);
          break;
      }
    },
    [text]
);

useEffect(() => {
    document.addEventListener("keydown", handleKeyEvent, false);
    return () => {
      document.removeEventListener("keydown", handleKeyEvent, false);
    };
  }, [handleKeyEvent]);

受け付けたキー入力を表示するだけのサンプルは以下

See the Pen Untitled by maruko (@ganemaruko) on CodePen.

追記:面倒な実装をしなくても、react-useというモジュールにあるuseKey,useKeyPressあたりがやってくれるみたいです。(需要がありそうなので、考えてみるとそれはそう、という感じです…)

github:https://github.com/streamich/react-use

storybookのデモ:https://streamich.github.io/react-use/?path=/story/sensors-usekey–demo

関係ないですが、react-useはuseMotionとか、デバイスの動きを使ったUIを作るのに便利そうで、色々とワクワクします。