Skip to main content
Version: 5

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.