useKeyPress

このフックを使用すると、特定のキーコードをリッスンし、現在押されているかどうかを知ることができます。

import { useKeyPress } from '@xyflow/react';
 
export default function () {
  const spacePressed = useKeyPress('Space');
  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
 
  return (
    <div>
      {spacePressed && <p>Space pressed!</p>}
      {cmdAndSPressed && <p>Cmd + S pressed!</p>}
    </div>
  );
}

シグネチャ

名前	型	デフォルト
#`keyCode`	`文字列 \| 文字列[] \| null` 文字列は、「Space」のような単一のキーコード、または「Meta+s」のようなキーの組み合わせを表すために使用できます。文字列の配列を渡すと、複数のキーコードを使用してフックを切り替えることができます。
#`options`	`オブジェクト`
#`options.target`	`ウィンドウ \| ドキュメント \| HTMLElement \| ShadowRoot \| null` 特定の要素でのキー押下をリッスンしたい場合があります。このフィールドで設定できます！
#`options.actInsideInputWithModifier`	`ブール値` 入力フィールドがフォーカスされているときにキー押下フックがトリガーされるのを防ぐために、このフラグを使用できます。	`true`
#戻り値
#	`ブール値`

注釈

このフックはReactFlowInstanceに依存しないため、アプリ内のどこでも自由に使用できます！

フックユーティリティ