Push gameplay data to React

The Blueprint side of the events channel: push typed state to one or more HUD layers without writing JSON by hand.

End-to-end example: player:hp ticking in React

UE side

1. Add a React Bridge Sender component to your character / GameMode / AI controller (any Actor).
2. (Optional) Set TargetBridgeName to a single HUD layer's Name. Empty = broadcast.
3. From any BP graph, call PushFloat:

Event On Health Changed (NewHP, MaxHP : float)
  ├─ Push Float ("player:hp",     NewHP)
  └─ Push Float ("player:hp:max", MaxHP)

React side

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

export function HpBar() {
  const hp = useUnrealState<number>('player:hp', 100);
  return <span>HP: {hp}</span>;
}

Supported types

Helper	Payload shape	Use for
PushFloat / PushInt / PushBool / PushString	{ value: v }	scalars
PushVector	{ value: { X, Y, Z } }	positions / sizes
PushMap	flat { k1: v1, ... }	inventories, key-value bundles
PushRaw	verbatim JSON	escape hatch

useUnrealState auto-unwraps { value: X }

Single-key value payloads (everything except PushMap / PushRaw) unwrap automatically — no .value in your React code.

Multi-HUD routing

Set the sender's TargetBridgeName to dispatch to one layer only:

ReactBridgeSender on BP_PlayerCharacter
  TargetBridgeName: "HpBar"   ← only the HpBar layer receives PushFloat/PushMap
  TargetBridgeName: ""         ← broadcast to every layer

See Multi-HUD anchors for the layer-naming pattern. Reference: ReactBridgeSender.