Hooks & Customization API

When static JSX markup is not enough: dynamic icons, translations, headless hotkeys, and hints.

useMnemonic Hook

Use the hook when your button has complex internal elements (icons, badges, rich tooltips) or translated text that cannot be analyzed statically at build time.

// 1. Import mnemonic hook
import { useMnemonic } from "react-keybound";

// 2. Custom button component with rich nested children
export function CustomButton({ onSave }) {

  // Returns formatted ReactNode label, accessible text, and triggerProps
  const { label, text, triggerProps } = useMnemonic<HTMLButtonElement>(

    "&Save to Cloud",

    {

      action: "click",

      className: "text-ember underline font-medium",

    }

  );

  return (

    <button {...triggerProps} onClick={onSave} title={text}>

      <CloudIcon />

      <span>{label}</span>

    </button>

  );

}

useHotkey Hook

// 1. Import headless hotkey hook
import { useHotkey } from "react-keybound";

// 2. Global headless keyboard listener
export function GlobalShortcuts() {

  // Register command palette shortcut
  useHotkey("mod+shift+k", () => {

    console.log("Global command triggered");

  });

  return null;

}

Overlay Hints & KeyboundHelp

<KeyboundOverlay /> provides a clean floating badge overlay over all currently eligible buttons, while <KeyboundHelp /> renders an accessible reference list.

// 1. Import provider, visual overlay, and accessible help list
import { KeyboundProvider, KeyboundOverlay, KeyboundHelp } from "react-keybound";

// 2. Root application setup with dynamic hint controls
export function App() {

  const [hintsOpen, setHintsOpen] = useState(false);

  return (

    // Configure reveal mode and mnemonic modifier chord
    <KeyboundProvider reveal="modifier" mnemonicModifier="alt">

      {/* Renders floating shortcut badges over eligible elements */}
      <KeyboundOverlay open={hintsOpen} />

      {/* Accessible keyboard shortcut reference sheet */}
      <KeyboundHelp className="my-custom-list" />

    </KeyboundProvider>

  );

}