Set shortcut using a forEach loop?

[deadcoder0904]

I want to set shortcuts using forEach loop like:

const quickActions = [
	{ name: 'home', icon: HomeIcon, shortcut: 'gh', url: '/' },
	{ name: 'essays', icon: HashtagIcon, shortcut: 'ge', url: '/essays' },
	{ name: 'quotes', icon: LightningBoltIcon, shortcut: 'gq', url: '/quotes' },
	{ name: 'tags', icon: TagIcon, shortcut: 'gt', url: '/tags' },
]

quickActions.forEach((action) => {
		useHotkeys(action.shortcut, () => {
			router.push(action.url)
		})
	})

Now I can't do that bcz it breaks the hooks rule of not using it inside a loop.

Is there a good solution to this? One way would be to do it individually but feels a tad bit tedious.

[deadcoder0904]

Solved it using a hack thanks to Reddit:

useHotkeys(quickActions.map((a) => a.shortcut).join(', '), (_, handler) => {
		const item = quickActions.find((action) => action.shortcut === handler.shortcut)
		if (item) {
			router.push(item.url)
		}
	})

Another comment mentioned that it would be a good idea to include an array.

I am using another library called fzf which has a selector method. It allows me to use a selector to perform fuzzy search on any nested key of an object. Maybe something like that would be cool for react-hotkeys-hook.

Here's an idea for solving the above problem using my proposed API:

useHotkeys(quickActions, {
	selector: action => action.shortcut
	callback: item => {
		router.push(item.url)
	}
})

Maybe an idea for v4?

[JohannesKlauss]

Hi,
Thanks for the proposal. Using an array sounds interesting, I know that mantine does it like that. I'll try to figure out on how we could integrate this. Maybe a separate hook like useHotkeysMap or something like that would be useful to abstract away the need for own mapping.

[deadcoder0904]

if you can figure out how to do it in the same hook of course by changing API structure then it would be great as it is a major version so can be a breaking change.

take a look at fzf as well bcz it does support both things & you might get inspiration from it as well :)

[JohannesKlauss]

fzf is a non react library, so they are fine doing that. The forEach looping won't work in the same hook because we need to memoize the callback, which would break the hook rules. So I think a map would be in order.

[deadcoder0904]

well, you know better! thanks for this library :)

[deadcoder0904]

@JohannesKlauss i have an issue with my implementation. + allows for me to press both the keys together but i want to press one key after the other like twitter has. if you use twitter, you can see when you press g & then h, it goes to /home route.

i can't do that. i have to press both the keys at the same time like ctrl+alt+delete on windows. how can i make sure to press one key after the other?

[JohannesKlauss]

Sorry, for the late response, didn't set my notifications right.
To your solution:
Just set a state flag to true when the first key is pressed (and possibly set it to false after a given frame of time) and then check that flag inside the second hotkey callback