Skip to Content
ReferenceHooks

useKeyPress()

Source on GitHub

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:
NameTypeDefault
keyCodeKeyCode

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.targetWindow | Document | HTMLElement | ShadowRoot | null

Listen to key presses on a specific element.

document
options.actInsideInputWithModifierboolean

You can use this flag to prevent triggering the key press hook when an input field is focused.

true
options.preventDefaultboolean
Returns:
boolean

Notes

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