Skip to content

Keyboard bindings

A typed BP → React channel for keyboard events. The plugin does not own input listening — your BP decides when a key fires (typically via Enhanced Input actions) and calls one function. React subscribes by a typed enum.

This sidesteps the Mac UE 5.7 Slate input pipeline regressions that affect in-CEF keyboard focus — your IA → BP graph → bridge path never touches the Slate input pre-processor.

End-to-end example: a Q key that pings React

UE side

  1. Create an Enhanced Input Action IA_Q (Value Type = Boolean).

  2. Add a mapping for the Q key on whichever Input Mapping Context your PlayerController uses.

  3. In your PlayerController BP (or any other BP that can receive Enhanced Input), drag from EnhancedInputAction IA_Q:

    • From the Started exec pin → SendKeyToWeb node (search "Send Key To Web" in the BP Action menu).
      • Key = EReactKey::Q
      • Type = EReactKeyType::Down
    • From the Completed exec pin → another SendKeyToWeb node:
      • Key = EReactKey::Q
      • Type = EReactKeyType::Up

That's it on the UE side. SendKeyToWeb is a static function — no component needed, callable from anywhere with a world context.

React side

tsx
import { useUnrealKeybinding, ReactKey } from 'unreal-react-bridge';

export function MyHud() {
  useUnrealKeybinding(ReactKey.Q, (type) => {
    if (type === 'down') doSomething();
  });
  return <div>…</div>;
}

Supported keys

ReactKey covers letters, digits, function row, modifiers, control/editing keys, and arrows:

  • Letters: AZ
  • Digits (top row): Zero, One, Two, … Nine
  • Function row: F1F12
  • Modifiers: LeftShift / RightShift, LeftCtrl / RightCtrl, LeftAlt / RightAlt, LeftCmd / RightCmd
  • Control / editing: SpaceBar, Enter, Escape, Tab, BackSpace, Delete, Insert, Home, End, PageUp, PageDown
  • Arrows: Left, Right, Up, Down

Symbols (-, =, [, ], etc.) and the numpad are not in v1. If you need those, file an issue.

Held-state pattern

The hook is callback-only. For "highlight while held" UX, manage state yourself:

tsx
const [held, setHeld] = useState(false);
useUnrealKeybinding(ReactKey.SpaceBar, (type) => setHeld(type === 'down'));
return <Button highlighted={held}>Charge</Button>;

Multiple keys

Each useUnrealKeybinding subscribes to one key. For a skill bar with digits 1..0, write ten fixed calls — never wrap in a loop or conditional (React hook rules):

tsx
useUnrealKeybinding(ReactKey.One,  (t) => t === 'down' && fire('1'));
useUnrealKeybinding(ReactKey.Two,  (t) => t === 'down' && fire('2'));
// ...
useUnrealKeybinding(ReactKey.Zero, (t) => t === 'down' && fire('0'));

Why not useUnrealEvent('__keybinding__', …)?

In development the SDK guards against subscribing to __* event names and logs an error redirecting you to the dedicated hook. The keybinding channel is structured ({ key, type } payload, typed enum on both ends); the dedicated hook gives you that contract. Generic useUnrealEvent stays for your own ad-hoc channels.

Released under the MIT License.