Input · HotKeys
HotKeys
used to facilitate the customization of keyboard shortcut

Demos

How to import

PinCode supported from 2.66.0

Explaination

The hotkeys only support combinations of modifier keys like Shift, Control, Meta, and Alt with other keys.
Meta corresponds to Command on macOS and Win on Windows.
When setting a shortcut that overlaps with common shortcuts like Ctrl/Meta + C, the preventDefault setting can be used to control whether the default event is triggered.

Basic Usage

Pass in key combinations via hotKeys and bind a shortcut handler function using onHotKey to respond to the action.
When pressing Ctrl + Shift + A, it opens the modal. By default, it listens on the body, making it effective globally.
It's also recommended to use the HotKeys.Keys wrapper to set hotkeys.

Custom content

Set the characters through content
Replace the element through render

prevent Default event

Control the default event by setting preventDefault.

change the DOM element the listener is mounted on

The hotkey is listened to on the body by default, through getListenerTarget

API Reference

HotKeys

PropertyInstructionstypeDefault
classNameclass namestring
contentSet the charactersstring[]-
getListenerTargetchange the DOM element the listener is mounted on() => HTMLElementdocument.body
hotKeysDefine keyboard shortcut,valuesKeyboardEvent.key[]-
onClickcallback that clicking triggers() => void-
onHotKeycallback that hotKeys triggers(e: KeyboardEvent) => void-
preventDefaultWhether to prevent the default behavior of the shortcutbooleanfalse
renderReplace the element() => ReactNode | ReactNode
stylestyleCSSProperties

Design Tokens