F1 Help Key Kbd for React

When it actually opens your help, typically in desktop-style web apps with a lot of features. In a browser, F1 may open the browser's own help instead unless your page catches it.

Next to the Help item in a menu, in a help button's tooltip and on the keyboard shortcuts page. It doesn't need to be on screen all the time.

Help for what the person is doing: the page or the focused field, not a generic start page. A side panel keeps their work visible while they read.

Not by default: on Mac keyboards, F1 lowers the screen brightness unless Fn is held or the function keys are set to standard mode. On Mac, ⌘? is the usual help shortcut.

Many laptops need Fn to reach F1, and some people never use function keys. Keep a visible Help button or menu item; the key is a shortcut to it.

Add a keydown listener to the document, check for event.key equal to F1, call preventDefault so the browser's help doesn't open, and open yours. Remove the listener when the component is removed.