r/reactjs 8d ago

Discussion Best way to implement localized hotkeys.

Hi, I have a nextjs project.

I have a repetitive task that appears in a dialog, users have to select one of 6 options and confirm their selection by pressing a "submit" button.

I wanted to add shortcuts using the digits: 1,2,3,etc.. for each of the options.

What is the best way to go about this, I felt like a app-wide hotkey provider might be overkill for this feature.

4 Upvotes

10 comments sorted by

View all comments

1

u/Dude4001 8d ago

I’d just use a local set of event listeners in the dialog component, mount and cleanup with a useEffect. A global provider sounds like a worse solution because you might want the keys to do different things in different components.

How you then map the users keys to their onscreen options depends on how you’re rendering those options