use-hotkeys
Listen for keys combinations on document element
Import
Source
Docs
Package
Usage
use-hotkeys
accepts as its first argument an array of hotkeys and handler tuples:
hotkey
- hotkey string, for examplectrl+E
,shift+alt+L
,mod+S
handler
- event handler called when a given combination was pressedoptions
- object with extra options for hotkey handler
The second argument is a list of HTML tags on which hotkeys should be ignored.
By default, hotkeys events are ignored if the focus is in input
, textarea
and select
elements.
Targeting elements
use-hotkeys
hook can work only with document element, you will need to create your own event listener
if you need to support other elements. For this purpose, @mantine/hooks
package exports getHotkeyHandler
function
which should be used with onKeyDown
:
With getHotkeyHandler
you can also add events to any dom node using .addEventListener
:
Supported formats
mod+S
– detects⌘+S
on macOS andCtrl+S
on Windowsctrl+shift+X
– handles multiple modifiersalt + shift + L
– you can use whitespace inside hotkeyArrowLeft
– you can use special keys using this format
Types
@mantine/hooks
exports HotkeyItemOptions
and HotkeyItem
types:
HotkeyItem
type can be used to create hotkey items outside of use-hotkeys
hook: