Unreal React Bridge

React hooks and utilities for connecting React UI with Unreal Engine 5.6+

🎯 Overview

unreal-react-bridge provides a simple and powerful way to connect React UI components with Unreal Engine 5. This library enables seamless bidirectional communication between your React frontend and UE5 backend, making it easy to create rich game UIs without deep C++ knowledge.

✨ Features

• 🎯 Simple API: React hooks that feel natural to React developers
• 🔄 Bidirectional Communication: Send and receive events between React and UE5
• 🛡️ Full TypeScript Support: Complete type safety with IntelliSense
• 🐛 Built-in Debugging: DevTools for monitoring bridge status and events
• 📚 Comprehensive Documentation: Detailed guides and examples
• 🚀 Production Ready: Optimized for performance and reliability

📦 Installation

npm install unreal-react-bridge

Peer Dependencies:

• React >= 18.0.0

🚀 Quick Start

import React from 'react';
import { useUnrealBridge, useUnrealEvent, useUnrealState } from 'unreal-react-bridge';

function GameHUD() {
  const { sendToUnreal, isConnected } = useUnrealBridge({
    debug: true,
    autoReconnect: true
  });

  // Listen for health updates
  const [health] = useUnrealState('player:health:update', 100, (data) => data.current);

  // Send reload command to UE5
  const handleReload = () => {
    sendToUnreal('ui:reload:click', { timestamp: Date.now() });
  };

  return (
    <div>
      {!isConnected && <div>Connecting to game...</div>}
      <div>HP: {health}</div>
      <button onClick={handleReload}>Reload</button>
    </div>
  );
}

📚 Documentation

• API Reference
• Usage Guide
• Examples

🎮 Examples

Check out the examples directory for complete implementations:

• Basic HUD: Simple health and ammo display
• Game Menu: Interactive pause menu
• Chat System: Real-time messaging interface

🔧 Hooks API

useUnrealBridge

Main hook for bridge connection and sending events.

const { sendToUnreal, isConnected, isReady, connectionStatus } = useUnrealBridge(config);

useUnrealEvent

Subscribe to events from UE5.

useUnrealEvent('event:name', (data) => {
  console.log('Received:', data);
});

useUnrealState

Automatically sync UE5 state with React state.

const [value, setValue] = useUnrealState('state:event', initialValue, transform);

🔗 UE5 Integration

This package communicates with the Unreal Engine plugin through a global window.ue.bridge object:

window.ue.bridge = {
  version: "1.0.0",
  OnReactEvent: (eventName: string, jsonData: string) => void,
  OnReactReady: () => void
};

Events from UE5 to React are sent via CustomEvent with data in event.detail.

🛠️ Development

# Install dependencies
npm install

# Start development build
npm run dev

# Run tests
npm test

# Build for production
npm run build

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

📄 License

MIT © [Carlos Li]

🙏 Acknowledgments

• Built for Unreal Engine 5.6+
• Compatible with UE5 Plugin version 1.0.0+