unreal-react-bridge

React hooks and components for connecting a React UI to Unreal Engine 5.7+.

Install

npm install unreal-react-bridge

Peer dep: react >= 18.

Quick start

import {
  UnrealBridgeProvider,
  UnrealReadyGate,
  useUnrealBridge,
  useUnrealState,
} from 'unreal-react-bridge';

function HUD() {
  const { send } = useUnrealBridge();
  const hp = useUnrealState<number>('player:health', 100);
  return (
    <>
      <div>HP: {hp}</div>
      <button onClick={() => send('ui:reload:click', {})}>Reload</button>
    </>
  );
}

createRoot(root).render(
  <UnrealBridgeProvider>
    <UnrealReadyGate fallback={<Loader />}>
      <HUD />
    </UnrealReadyGate>
  </UnrealBridgeProvider>,
);

What's exported

Provider — <UnrealBridgeProvider> (required at the app root)

Hooks

• useUnrealBridge() → { send, isConnected, isReady }
• useUnrealEvent(name, callback) — subscribe to a UE event
• useUnrealState(name, initial) — auto-syncing state from a UE event
• useInitialState(key) — read a slice of UE's initial state payload

Components (1.2.0+)

• <UnrealReadyGate fallback> — renders fallback until the bridge is ready
• <UnrealEvent name onMessage> — declarative useUnrealEvent
• <UnrealValue source initial render> — render-prop binding to useUnrealState
• <UnrealDevPanel> — dev-only diagnostics overlay (status, event log, manual trigger). Gate behind a dev flag.

Devtools — EventMonitor

More

Full quickstart, examples, and the UE5 plugin/Web HUD Actor side live in the repo README. Runnable HUD examples are in examples/.

License

MIT © Carlos Li