
Show HN: A keyboard shortcut library for React - ogwh
https://github.com/reasonink/clack-react
======
duncanawoods
From creating a few complicated web editors, the things I would find really
useful in a (non-react specific) keyboard shortcut support library:

\- help identifying "web-safe" keyboard short-cuts which are not taken by the
OS or the browser

\- handling of different short-cut schemes for OS/browser combination

\- easy handling of common system conventions e.g. f2 on windows/ubuntu is
often rename but probably not on macos

\- handling reduced keyboards e.g. not sure what the state of on-screen or
iPad keyboards is these days but they certainly used to lack a lot of keys
making any short-cut heavy app almost unusable

~~~
tlackemann
You can override "web safe" keyboard shortcuts (for example, "CTRL+S") in a
pretty standard way, with or without a library. The biggest issue I think is
the _expected behavior_ for the user. If I press CTRL+S, do I expect the same
HTML dialog or something custom in the app. Depends on the experience.

For different OS/browsers, the library I wrote for react shortcuts (see
comment history for this post) handles this behind-the-scenes. CTRL/CMD are
interchangeable depending on MacOS vs anything else.

Handling educed shortcuts is an interesting point I don't believe a lot of
people are exploring. With increasingly complex apps being built that often
rely on memorizing shortcuts, what alternatives exist beyond good design? I
don't know the answer myself but am open to thoughts on how that might be
achieved.

~~~
iudqnolq
> With increasingly complex apps being built that often rely on memorizing
> shortcuts, what alternatives exist beyond good design?

I think it's key to make the shortcuts discoverable inline. Maybe by default,
maybe with a modifier pressed, every button and menu item should show the
shortcut for it.

Also take a look at the experience in Spacemacs, where you compose multiple
keys for a shortcut and if you pause you get a pop-up showing possibilities
(eg press , to get major mode specific, then pause to see options, press x for
text, then pause to see all the options for the next letter. Then when you
know it you just quickly hit ,xi) (I vaguely remember someone else wrote this
and Spacemacs popularized it, but I can't find the name)

~~~
jcagalawan
Interesting to me is that a lot of native apps have similar functionality with
the Alt key to navigate menus. Certain menu options would have an underlined
character and you'd hit that character to select it like in Spacemacs.

I never use those in apps outside of Spacemacs. I think the bottom bar
succinctly showing you all the options when you hit space/comma really makes
discoverability a lot easier than in traditional apps.

------
tlackemann
I built a keyboard shortcut library for React not too long ago. There are a
couple of issues you might run into.

There is a real chance that you don't define your keyboard shortcuts all in
one place. There could be many components that have their own shortcuts. Some
might override each other (Press "E" to toggle flashlight on/off or while
riding a boat, "E" disengages). Since that's the case, you need a way to turn
off or unregister the shortcut.

There is also the chance the shortcut is not being activated all the time.
Having experimented with a method like in this library, I can tell you that
unless you are focused on a root or parent element to the component, it's not
going to fire.

Third, I'm not seeing any tests. Are you instructing people to install this
library and it's not tested?

I opted to write my own that defines a single global event listener and can
register/unregister shortcuts on the fly. No dependencies and tested[0]

[0] [https://github.com/UnicornHeartClub/react-
keybind](https://github.com/UnicornHeartClub/react-keybind)

------
fortytw2
This is neat, but the way blueprintjs handles Hotkeys is my absolute favorite
of anything I've used.

[https://blueprintjs.com/docs/#core/components/hotkeys](https://blueprintjs.com/docs/#core/components/hotkeys)

It's essentially a JS decorator `@HotkeysTarget` and then your component gets
a `renderHotkeys()` method on it.

------
11235813213455
[https://github.com/JohannesKlauss/react-hotkeys-
hook](https://github.com/JohannesKlauss/react-hotkeys-hook) looks more
interesting to me (react-hooks)

------
yhoiseth
Thanks for sharing! Curious why you made it. Are there no good alternatives?

