use-hotkeys
Listen for keys combinations on document element
Import
Source
Docs
Package
Usage
Hook accepts an array with hotkey and handler tuples:
hotkey- hotkey string e.g.ctrl+E,shift+alt+L,mod+Shandler- event handler called when given combination was pressed
import { useHotkeys } from '@mantine/hooks';function Demo() {// ctrl + J and ⌘ + J to toggle color scheme// ctrl + K and ⌘ + K to searchuseHotkeys([['mod+J', () => toggleColorScheme()],['ctrl+K', () => search()],['alt+mod+shift+X', () => rickRoll()],]);return null;}
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 package exports getHotkeysHandler function
which should be used with onKeyDown:
import { useState } from 'react';import { getHotkeyHandler } from '@mantine/hooks';import { useNotifications } from '@mantine/notifications';import { TextInput } from '@mantine/core';function Demo() {const [value, setValue] = useState("I've just used a hotkey to send a message");const notifications = useNotifications();const handleSubmit = () =>notifications.showNotification({ title: 'Your message', message: value });const handleSave = () =>notifications.showNotification({ title: 'You saved', color: 'teal', message: value });return (<TextInputplaceholder="Your message"label="Press ⌘+Enter or Ctrl+Enter when input has focus to send message"value={value}onChange={(event) => setValue(event.target.value)}onKeyDown={getHotkeyHandler([['mod+Enter', handleSubmit],['mod+S', handleSave],])}/>);}
Supported formats
mod+S– detects⌘+Son macOS andCtrl+Son Windowsctrl+shift+X– handles multiple modifiersalt + shift + L– you can use whitespace inside hotkey
Definition
function useHotkeys(hotkey: string, handler: (event: KeyboardEvent) => void): void;
Built by Vitaly Rtishchev and these awesome people