use-keyboard-shortcut

useKeyboardShortcut

Click here for a small demo!

A custom React hook that allows adding keyboard shortcuts to a React application.

import React from 'react'
import useKeyboardShortcut from 'use-keyboard-shortcut'

const App = () => {
  useKeyboardShortcut(['Shift', 'H'], () => console.log('Shift + H has been pressed.'), { overrideSystem: false })

  return (
    <div>Hello World</div>
  )
}

For another example on how to use this hook, please see the example project

Documentation

useKeyboardShortcut(shortcutArray, callback, options)

Parameter	Type	Description
shortcutArray	Array	Array of KeyboardEvent.key strings. A full list of strings can be seen here
callback	Function	Function that is called once the keys have been pressed.
options	Object	Object containing some configuration options. See options section

Options

A list of possible options to put in the options object passed as the third parameters to the hook.

Option	Default	Description
overrideSystem	false	Overrides the default browser behavior for that specific keyboard shortcut.
ignoreInputFields	true	Allows disabling and disabling the keyboard shortcuts when pressed inside of input fields.

Bugs / Problems

Please create an issue.