hooks/usehotkeys

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useHotkeys hook basic usage

The useHotkeys hook accepts an array of hotkey and handler tuples as its first argument. Each tuple contains: hotkey string (e.g. 'ctrl+E', 'shift+alt+L', 'mod+S'), a handler function called when the combination is pressed, and optional options object for extra configuration.

useHotkeys tagsToIgnore parameter

The second argument to useHotkeys is a list of HTML tags on which hotkeys should be ignored. By default, hotkey events are ignored if focus is in input, textarea, and select elements. An empty array can be passed to not ignore hotkey events on any element.

getHotkeyHandler for element-specific hotkeys

The useHotkeys hook only works with the document element. For supporting other elements, use the getHotkeyHandler function from @mantine/hooks with onKeyDown, or add events to DOM nodes using addEventListener.

useHotkeys supported hotkey formats

Supported hotkey formats include: 'mod+S' (detects ⌘+S on macOS and Ctrl+S on Windows), 'ctrl+shift+X' for multiple modifiers, 'alt + shift + L' with whitespace support, 'ArrowLeft' for special keys using MDN KeyboardEvent.key format, 'shift + [plus]' to detect the + key, and 'Digit1' or 'Hotkey1' for physical key assignments from MDN keyboard event code values.

HotkeyItemOptions interface

The HotkeyItemOptions interface has two optional properties: preventDefault (boolean, defaults to true for preventing default behavior) and usePhysicalKeys (boolean, forces physical key assignment useful for non-QWERTY keyboard layouts).

HotkeyItem type definition

HotkeyItem is a tuple type defined as [string, (event: KeyboardEvent) => void, HotkeyItemOptions?]. It represents a hotkey configuration with the hotkey string, handler function, and optional options.

useHotkeys function signature

The useHotkeys function signature is: function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void. It accepts hotkey items, optional tags to ignore, and optional flag to trigger on contentEditable elements.

useHotkeys example with preventDefault and usePhysicalKeys

Example of creating hotkey items with options: const hotkeys: HotkeyItem[] = [['mod+J', () => console.log('Toggle color scheme'), { preventDefault: false }], ['ctrl+K', () => console.log('Trigger search')], ['alt+mod+shift+X', () => console.log('Rick roll')], ['D', () => console.log('Triggers when pressing "E" on Dvorak keyboards!'), { usePhysicalKeys: true }]]; useHotkeys(hotkeys);

getHotkeyHandler with addEventListener

The getHotkeyHandler function can be used to add hotkey events to any DOM node using addEventListener: document.body.addEventListener('keydown', getHotkeyHandler([['mod+Enter', () => console.log('Submit')], ['mod+S', () => console.log('Save')]]));

useHotkeys custom tags to ignore example

Example showing how to customize which tags ignore hotkeys: useHotkeys([['ctrl+K', () => console.log('Trigger search')]], ['INPUT', 'TEXTAREA']) ignores hotkeys only on input and textarea elements.

HotkeyItemOptions and HotkeyItem export

The HotkeyItemOptions and HotkeyItem types are exported from @mantine/hooks and can be imported as: import type { HotkeyItemOptions, HotkeyItem } from '@mantine/hooks';

Give your agent this brain