thmi-inx/use-keyboard-shortcut

A custom hook that allows adding keyboard shortcuts to React applications

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>
  )
}

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.
ignoreElementWithClassName	[]	Allows disabling keyboard shortcuts when pressed inside of an element with the specified CSS-class.

Bugs / Problems

Please create an issue.