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
Create an Enhanced Input Action
IA_Q(Value Type= Boolean).Add a mapping for the
Qkey on whichever Input Mapping Context your PlayerController uses.In your PlayerController BP (or any other BP that can receive Enhanced Input), drag from
EnhancedInputAction IA_Q:- From the
Startedexec pin →SendKeyToWebnode (search "Send Key To Web" in the BP Action menu).Key=EReactKey::QType=EReactKeyType::Down
- From the
Completedexec pin → anotherSendKeyToWebnode:Key=EReactKey::QType=EReactKeyType::Up
- From the
That's it on the UE side. SendKeyToWeb is a static function — no component needed, callable from anywhere with a world context.
React side
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:
A–Z - Digits (top row):
Zero,One,Two, …Nine - Function row:
F1–F12 - 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:
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):
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.