Show HN: A keyboard shortcut library for React | Hacker News Reader

Show HN: A keyboard shortcut library for React

github.com

66 pointsogwh9 comments

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

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.

> 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)

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.

There are not only OS and browser keyboard shortcuts but also assistive technology shortcuts like screen readers.

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

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

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

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

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

Reply on news.ycombinator.com