Show HN: A keyboard shortcut library for React

https://github.com/reasonink/clack-react

by ogwh • 6 years ago

66 9 6 years ago

github.com

yhoiseth• 6 years ago

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

tlackemann2• 6 years ago

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

duncanawoods• 6 years ago

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

tlackemann2• 6 years ago

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• 6 years ago

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)

extra88• 6 years ago

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

fortytw2• 6 years ago

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.

11235813213455• 6 years ago

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

Show HN: A keyboard shortcut library for React

Related Stories