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

#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!
Last updated on