useKeyPress()

这个钩子允许你监听特定的按键代码，并告知它们当前是否被按下。

🌐 This hook lets you listen for specific key codes and tells you whether they are currently pressed or not.


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>
  );
}

签名

🌐 Signature

Parameters:

Name	Type	Default
`keyCode`	`KeyCode` The key code (string or array of strings) specifies which key(s) should trigger an action. A string can represent: A single key, e.g. `'a'` A key combination, using `'+'` to separate keys, e.g. `'a+d'` An array of strings represents multiple possible key inputs. For example, `['a', 'd+s']` means the user can press either the single key `'a'` or the combination of `'d'` and `'s'`.	`null`
`options.target`	`Window \| Document \| HTMLElement \| ShadowRoot \| null` Listen to key presses on a specific element.	`document`
`options.actInsideInputWithModifier`	`boolean` You can use this flag to prevent triggering the key press hook when an input field is focused.	`true`
`options.preventDefault`	`boolean`

Returns:

boolean

注释

🌐 Notes

这个钩子不依赖于 ReactFlowInstance，所以你可以在应用的任何地方自由使用它！