how to facilitate React to Unity communication in a component without rendering unity webgl player

[gjagnoor]

Is there a way to send information to unity without rendering <Unity /> in the component? I don't want the game to render in that component but want to send information to it. For example we want to have a component in react where on clicking "create room" button it generates a room in unity. These rooms will be accessed at a later time in another component (this is where game will be)

Hope I was able to articulate my request clearly

[jeffreylanters]

This is currently not supported by the module, but will be in version 8.2.0. However there is a very simple workaround for this, by simply wrapping your Unity component within a div element which has its visibility set to hidden. This way it's not rendered by the browser but all of its events are still accessible.

[jeffreylanters]

Hi @gjagnoor, the requested behaviour came available in version 8.2.0 of the module. See the example below. The example below keeps the Unity component hidden until the Unity application is completely loaded and running.

import React, { Component } from "react";
import Unity, { UnityContext } from "react-unity-webgl";

class App extends Component {
  public state = {
    isLoaded: false,
  };

  private unityContext = new UnityContext({
    loaderUrl: "build/myunityapp.loader.js",
    dataUrl: "build/myunityapp.data",
    frameworkUrl: "build/myunityapp.framework.js",
    codeUrl: "build/myunityapp.wasm",
  });

  public componentDidMount(): void {
    this.unityContext.on("loaded", () => this.setState({ isLoaded: true }));
  }

  public render(): JSX {
    return (
      <Unity
        style={{ visibility: this.state.isLoaded ? "visible" : "hidden" }}
        unityContext={this.unityContext}
      />
    );
  }
}