useRenderedHotkey

Use useRenderedHotkey to show your defined hotkeys visually in your application with as much accuracy to the users keyboard layout as technically possible.

import { Hotkey, useHotkey, useRenderedHotkey } from "react-better-hotkeys";

const Comp = () => {
  const hotkey = useHotkey(Hotkey.Chord.Mod.K, () => {
    console.log("CMD+K pressed!");
  });
  const { asString, asParts } = useRenderedHotkey(hotkey);

  return (
    <>
      {asString}

      {asParts[0].map((p) => p[0]).join(asParts[1])}
    </>
  );
};

Arguments

hotkey

hotkey: HotKeyDef

The hotkey that should be rendered.

Examples

Different keyboard layouts

In this example you can rebind key codes to different keys, as they would be on other keyboard layouts. To sync the key codes with the actual keyboard layout each keycode must be pressed at least once without modifier keys pressed to receive the produced key. Because of browser limitation this is the most stable way to display hotkeys as they appear on the users keyboard. The internal key mapping is cached in localStorage to avoid having the user press each key again for each visit