Sender & Receiver

Two ActorComponents form the bidirectional channel. Sender pushes typed data from UE to React. Receiver subscribes to React-side events back into BP. Drop either on any Actor.

Sender (UE → React)

ReactBridgeSender exposes 7 typed Push* nodes. Each produces a CustomEvent on the web side whose event.detail follows a documented wire shape.

Helper	JS event.detail
PushFloat("hp", 75)	{ "value": 75 }
PushInt("score", 42)	{ "value": 42 }
PushString("name", "alice")	{ "value": "alice" }
PushBool("paused", true)	{ "value": true }
PushVector("loc", FVector(1,2,3))	{ "value": { "X":1, "Y":2, "Z":3 } }
PushMap("inv", { {"slot1","sword"} })	{ "slot1": "sword" } (flat, no envelope)
PushRaw("debug", "[1,2,3]")	[1,2,3] (verbatim)

Routing

• TargetBridgeName on the Sender component matches a HUD's Name.
• Leave it empty to broadcast to every mounted HUD.

Minimal BP wiring

Event Tick (or any gameplay event)
  └─ ReactBridgeSender → Push Float
        EventName:        "hp"
        Value:            <Health variable>
        TargetBridgeName: "HpBar"   ← empty for broadcast

On the React side:

useUnrealEvent<{ value: number }>('hp', (detail) => {
  setHealth(detail.value);
});

Receiver (React → UE)

ReactBridgeReceiver subscribes to a single named event from any HUD. Drop it on an Actor, set EventName, bind OnReceived.

• EventName (FString) — must match the React-side emit, e.g. ui:reload:click.
• OnReceived dispatcher — one pin: JsonData (String).

ReactBridgeReceiver
  EventName: "ui:reload:click"
        │
        └─ OnReceived (JsonData: String)
              └─ Print String  /  Parse JSON  /  call gameplay logic

From React:

import { useUnrealBridge } from 'unreal-react-bridge';

const { send } = useUnrealBridge();
<button onClick={() => send('ui:reload:click', { weapon: 'rifle' })}>Reload</button>

The BP OnReceived fires with JsonData = '{"weapon":"rifle"}'. Parse it with Parse JSON or the structured JSON nodes.

TIP

One Receiver = one event name. For many events, drop multiple Receivers on the same Actor.

Reference: BP Sender API · BP Receiver API.