Skip to content

Receive UI events in Blueprint

The React side of the events channel: React sends a typed event, any BP listening on that name receives it.

End-to-end example: a Reload button

React side

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

export function ReloadButton() {
  const { send } = useUnrealBridge();
  return (
    <button onClick={() => send('ui:reload:click', { weapon: 'pistol', ammo: 15 })}>
      Reload
    </button>
  );
}

UE side

  1. Add a React Bridge Receiver component to any actor.
  2. Set EventName to the React-side name, e.g. ui:reload:click.
  3. Bind OnReceived(JsonData : String):
text
ReactBridgeReceiver (component)
  EventName: "ui:reload:click"

Event On Received (JsonData : String)
  ├─ Print String JsonData
  └─ Parse JSON → drive gameplay

Payload format

JsonData arrives as whatever the JS side passed as send's second arg, serialised verbatim. Parse it with the built-in Parse JSON BP nodes or a small helper.

Notes

  • One Receiver fires once per matching event from any registered HUD layer; v1 has no per-source filter.
  • Stale components are skipped automatically.

Reference: ReactBridgeReceiver.

Released under the MIT License.