`<UnrealBridgeProvider>`

Source: web/sdk/src/components/UnrealBridgeProvider.tsx

Root React provider that constructs a single BridgeManager instance and exposes it to every hook and component in this SDK via React Context. Mount it once, at the root of your app — every other public API in unreal-react-bridge assumes a <UnrealBridgeProvider> ancestor.

tsx

import { createRoot } from 'react-dom/client';
import { UnrealBridgeProvider } from 'unreal-react-bridge';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <UnrealBridgeProvider>
    <App />
  </UnrealBridgeProvider>,
);

Props

The provider accepts every field of BridgeConfig plus children.

Prop	Type	Default	Notes
`children`	`ReactNode`	—	Required. Your application tree.
`debug`	`boolean`	`false`	When `true`, the underlying `BridgeManager` logs connection state, sent payloads, and ready transitions to the browser console.

TIP

There is no mock or autoSignalReady prop. The provider already handles the connect/ready handshake automatically by listening for the ue5-bridge-ready window event and invoking window.ue.bridge.onreactready() as soon as the bridge object is bound. See /guide/lifecycle for the full handshake.

Context value

Internally, the provider publishes the following shape (consumed by hooks):

interface BridgeContextValue {
  bridge: BridgeManager;
  isConnected: boolean;
  isReady: boolean;
  initialState: Record<string, unknown>;
}

bridge — the singleton BridgeManager for this React tree.
isConnected — true once window.ue.bridge exists (Unreal completed BindUObject).
isReady — true once Unreal's OnReactReady lifecycle hook has fired.
initialState — snapshot delivered via ue5-bridge-ready.detail.initialState. See useInitialState.

You consume this value through hooks (useUnrealBridge, useUnrealEvent, etc.). Direct context access is not part of the public API.

Behavior

The provider constructs the BridgeManager lazily inside a useRef, so it survives re-renders and StrictMode double-invocation.
It subscribes to the ue5-bridge-ready window event once on mount. When it fires, the provider re-reads bridge.getStatus() and re-renders consumers.
On unmount it calls bridge.destroy(), which removes the window listener and clears every internal subscription.

Dev mode (running outside Unreal)

When you open your React app in a regular browser (e.g. vite dev on http://localhost:5173), window.ue.bridge is not defined. The provider still mounts; the bridge sits in the not connected state:

isConnected and isReady stay false.
useUnrealBridge().send(...) is a no-op that prints a single warning to the console.
All event subscriptions wire up as normal window.addEventListener calls — you can manually window.dispatchEvent(new CustomEvent('player:hp', { detail: { value: 50 } })) from the browser devtools to drive your UI.

That graceful-degrade behavior is what makes hot reload usable; you can iterate UI in Chrome without launching the Editor. See /guide/dev-server for the full dev workflow.

WARNING

A single React tree must have exactly one <UnrealBridgeProvider>. Nesting providers creates two independent BridgeManager instances and will cause duplicate sends and dropped subscriptions.

<UnrealBridgeProvider> ​

Props ​

Context value ​

Behavior ​

Dev mode (running outside Unreal) ​

See also ​

`<UnrealBridgeProvider>`

Props

Context value

Behavior

Dev mode (running outside Unreal)

See also