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

Name	Type	Default
#`keyCode`	`string \| string[] \| null` A string can be used to represent both a single key code like "Space" or a combination of keys like "Meta+s". If you pass in an array of strings, multiple key codes can be used to toggle the hook.
#`options`	`object`
#`options.target`	`Window \| Document \| HTMLElement \| ShadowRoot \| null` You may want to listen to key presses on a specific element. This field lets you configure that!
#`options.actInsideInputWithModifier`	`boolean` You can use this flag to prevent triggering the key press hook when an input field is focused.	`true`
#Returns
#	`boolean`

Notes

This hook does not rely on a ReactFlowInstance so you are free to use it anywhere in your app!