Skip to main content
Version: 5.0

isHotkeyPressed

isHotkeyPressed lets you check whether a specific key or key combination is currently being held down. This is useful when you need to know modifier state inside another event handler — for example, inside a click handler.

Basic usage​

Import isHotkeyPressed from the package:

import { isHotkeyPressed } from 'react-hotkeys-hook';

Check for pressed keys inside callbacks​

A common use case is changing behavior based on whether a modifier key is held:

Live Editor
function ExampleComponent() {
  const [count, setCount] = useState(0);

  const onClick = () => isHotkeyPressed('shift')
    ? setCount(count => count - 1)
    : setCount(count => count + 1);

  return (
    <div>
      <p>The count is: {count}</p>
      <button onClick={onClick}>Alter the count</button>
      <p><small>Hold Shift while clicking to decrease.</small></p>
    </div>
  )
}
Result
Loading...

Check multiple keys simultaneously​

Pass an array or a comma-delimited string to check if multiple keys are pressed at the same time:

Live Editor
function ExampleComponent() {
  const [pressed, setPressed] = useState(false);

  const onClick = () => setPressed(isHotkeyPressed(['shift', 'a']));

  return (
    <div>
      <p>The hotkey was: {pressed ? 'pressed' : 'not pressed'}</p>
      <button onClick={onClick}>Check if Shift+A is held</button>
    </div>
  )
}
Result
Loading...

All keys in the array must be pressed simultaneously for isHotkeyPressed to return true.