Cursor-Control VS mousetrap

In the meantime: https://github.com/ReK42/Cursor-Control

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