mousetrap VS is-hotkey

this Q&A suggests using the mousetrap javascript library to create custom keybinds.

However if you're curious about the "hacky" way to do it, my game is reliant on arrow keys for minigames, and I was able to do it by pulling in the Mousetrap javascript library. https://craig.is/killing/mice

class Widget extends React.Component { componentDidMount() { this.setBindings() }, componentWillUnmount() { this.removeBindings(); }} setBindings and removeBindings, would use a library like mousetrap to bind specific keyboard shortcuts

I'm currently using mousetrap (https://github.com/ccampbell/mousetrap/). But it can't handle both "f" and "f a" at the same time. If I've defined "f a" as a shortcut, I can't use "f" as a shortcut anymore. However, as I understand, it's theoretically possible to differentiate them. When the user pressed "f", just wait a small period of time to see if there are any additional keypress. If no more keypresses, then trigger "f", otherwise, trigger something like "f a". I want to know are there any available libraries that can handle this? Thanks.

mousetrap.js

I faced the same issue. I tried out hotkeys and react-hotkeys-hook, but they didn't fit my needs. I ended up creating a component and placed it high up in the component tree, say HotkeyEvents (to avoid events being attached more than once), that handles all the shortcuts. I used the is-hotkey as a helper for detecting them.