useHotkeys

Category

Sensors

Export Size

807 B

Last Changed

5 days ago

Keyboard shortcuts written as hotkey strings — mod+K means ⌘K on Apple hardware and Ctrl+K elsewhere, selected per event with no platform probe.

Demo

Usage

import { useHotkeys } from '@reause/core'

useHotkeys([
  ['mod+K', () => openSearch()],
  ['shift+alt+T', () => toggleTheme(), { preventDefault: false }],
])

Scope a shortcut to a single element with getHotkeyHandler — it takes no tagsToIgnore guard, because the element it is bound to is the scope:

import { getHotkeyHandler } from '@reause/core'

<input onKeyDown={getHotkeyHandler([['mod+Enter', submit]])} />

Pass tagsToIgnore to change which targets are skipped and triggerOnContentEditable to let contenteditable targets through. Set usePhysicalKeys on an entry to match event.code instead of event.key, so the shortcut survives a layout change (AZERTY / Dvorak).

Type Declarations

export interface KeyboardModifiers {
    alt: boolean;
    ctrl: boolean;
    meta: boolean;
    mod: boolean;
    shift: boolean;
}

export interface Hotkey extends KeyboardModifiers {
    key?: string;
}

export interface HotkeyItemOptions {
    preventDefault?: boolean;
    usePhysicalKeys?: boolean;
}

export type HotkeyItem = [
    string,
    (event: KeyboardEvent) => void,
    HotkeyItemOptions?
]

export namespace useHotkeys {
    export type Hotkey = HotkeyItem;
}

type CheckHotkeyMatch = (event: KeyboardEvent) => boolean

export function parseHotkey(hotkey: string): Hotkey

export function getHotkeyMatcher(hotkey: string, usePhysicalKeys?: boolean): CheckHotkeyMatch

export function getHotkeyHandler(hotkeys: HotkeyItem[])

export function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?): void

Source

Source · Demo · Mantine

Contributors

Changelog

v0.1.6 on

6da42 - feat(core): add useHotkeys (#936)