[Proposal] Hotkeys

Summary

Very often user interfaces provide useful hotkeys in order to facilitate or speed up user interactions and navigation. Most of the time these hotkeys are global, meaning that the event associated with them is added to and handled by the document object (or at least the outermost wrapping element). While the implementation for such a global hotkey is not hard, providing it as a simple utility hook might turn out to be useful.

Hotkey is a key or combination of keys providing a quick access to a function within the application.

Draft

The hotkey object would look something like this:

interface Hotkey {
  key: string
  code: string
  keyCode: number
  shift: boolean
  alt: boolean
  ctrl: boolean
  meta: boolean
  enabled: boolean
  allowInsideInputs: boolean
}

• The key, code and keyCode properties represent the key itself (same as the KeyboardEvent)
• The ctrl, shift, alt and meta properties are the modifier keys. True is a modifier key is required for the hotkey handle to run, False if it is not required and undefined/null (left out) if modifier key is irrelevant.
• The enabled property shows whether the hotkey is currently enabled/available and its handle can be run.
• The allowInsideInputs indicates whether the hotkey can trigger on an input element (for example while the user is typing something). A simple check is done by examining the target element’s instance type and checking for contenteditable attribute, though this is not perfect and will require some thinking.

Then a handle function and a variable number of hotkey objects are passed to a hook

function useHotkey(handle, ...hotkeys)

which then adds an event listener to the document object. Whenever a key is pressed it is checked whether the hotkey is pressed and the handle is called if so. This way not only a hotkey can be defined seamlessly, but also only be available only when a given component (tree) is rendered, or perhaps if user has a certain permission, or even something that I can’t think of right now.

I think that this feature would be nice to have, since the aim is to make this project a general use UI library. Tell what you guys think… I have something really close implemented in a project of mine, so if this sparks interest, then I could work on it in the near future.

---

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

[hearchad]

@oliviertassinari I was going to propose HotKeys and found this thread. Can I re-open? My approach is not a hook, but a wrapper component that enables the consumer to either accept the default click simulation or write their own handler. I wrote about it here. https://dev.to/chadsteele/how-to-add-hotkeys-in-react-4610

simple

<HotKey keys="ArrowUp">
    <SomeClickableComponent />
</HotKey>

optional

<HotKey keys="Enter Space" scope={window.document} callback={myfunc} tooltip="Hit Enter or Spacebar">
    <SomeClickableComponent />
</HotKey>

p.s. I disagree with earlier comments. UI library should support input as well as output and obviously somebody agrees. 😃 https://material.io/design/interaction/gestures.html#principles

[oliviertassinari]

@muqg I have added the waiting for users upvotes tag. I’m closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.