# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arcware.cloud/web-integration/new-websdk/code-examples/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.