# React

{% hint style="danger" %}
Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"
{% endhint %}

The example below demonstrates how to integrate the **Arcware Pixel Streaming WebSDK** into a **React application**.

It serves as a basic reference implementation showing how to:

* initialize the WebSDK
* attach the stream to a React component
* send UI interactions from the web application to Unreal Engine
* receive responses from the Unreal application

You can experiment with this example directly using CodePen:

[Open the React example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO)

Replace the example <mark style="color:orange;">`shareId`</mark> with your own project's Share ID to connect to your application.

***

### Code Template

For a quick start, you can use the following **`App.js`** template. It demonstrates a minimal React integration of the WebSDK.

```javascript
import "./App.css";
import { ArcwareInit } from "@arcware-cloud/pixelstreaming-websdk";

import React, { useState, useRef, useEffect } from "react";

function App() {
  const videoContainerRef = useRef(null);
  const [arcwareApplication, setArcwareApplication] = useState(null);
  const [applicationResponse, setApplicationResponse] = useState("");

  const handleSendCommand = (descriptor) => {
    arcwareApplication?.emitUIInteraction(descriptor);
  };

  useEffect(() => {
    const { Config, PixelStreaming, Application } = ArcwareInit(
      {
        shareId: "<your-shareId-goes-here>"
      },
      {
        initialSettings: {
          StartVideoMuted: true,
          AutoConnect: true,
          AutoPlayVideo: true
        },
        settings: {
          infoButton: true,
          micButton: true,
          audioButton: true,
          fullscreenButton: true,
          settingsButton: true,
          connectionStrengthIcon: true
        }
      }
    );

    setArcwareApplication(Application);

    Application.getApplicationResponse((response) =>
      setApplicationResponse(response)
    );

    // Append the application's root element to the video container
    if (videoContainerRef?.current) {
      videoContainerRef.current.appendChild(Application.rootElement);
    }
  }, []);

  return (
    <div>
      <div
        ref={videoContainerRef}
        style={{ width: "100vw", height: "100vh" }}
      />

      <button
        style={{
          position: "absolute",
          right: "100px",
          bottom: 20,
          margin: "auto",
          zIndex: 9,
          width: "200px"
        }}
        onClick={() => handleSendCommand({ test: "Send command" })}
      >
        Emit command to Unreal
      </button>
    </div>
  );
}

export default App;
```

***

### How This Example Works

This React example performs the following steps:

#### 1. Initialize the WebSDK

The `ArcwareInit` function creates the necessary SDK components:

* `Config` – configuration object
* `PixelStreaming` – streaming controller
* `Application` – application interaction layer

***

#### 2. Attach the Stream to the React Component

A React `ref` (`videoContainerRef`) is used to mount the stream container.

The SDK exposes a DOM element via:

```
Application.rootElement
```

This element contains the video stream and input handling.

***

#### 3. Receive Messages from Unreal Engine

The function:

```
Application.getApplicationResponse()
```

allows the web application to receive responses or messages sent from the Unreal Engine application.

***

#### 4. Send Messages to Unreal Engine

User interactions can trigger messages to Unreal Engine using:

```
Application.emitUIInteraction()
```

In the example, clicking the button sends a simple test command.

***

### Notes

* Replace <mark style="color:orange;">`<your-shareId-goes-here>`</mark> with your own Share ID.
* The stream container should always be mounted using a **React ref** to ensure correct lifecycle handling.
* The `useEffect` hook ensures the stream is initialized only once when the component mounts.