jeffreylanters / react-unity-webgl

React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.

Home Page:https://react-unity-webgl.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to call a function made in unity inside a react component

MuhammadHARIS46 opened this issue · comments

Please avoid duplicates

Language and Compiler

TypeScript's built-in Compiler

What environment are you using?

Local Development Server

When does your problem occur?

I don't know

What does your problem relate to?

The problem seems Unity related

React-Unity-WebGL Version

9.4.3

React Version

18.2.0

Unity Version

2020.3.19

What happened?

i am unable to call a function made in unity inside my react js(typescript) component. Note i am using typescript

Reproducible test case

import React, { useState } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

const UnityComponent = () => {
const { unityProvider } = useUnityContext({
loaderUrl: "Unity/Build/GENIEAI_.loader.js",
dataUrl: "Unity/Build/GENIEAI_.data",
frameworkUrl: "Unity/Build/GENIEAI_.framework.js",
codeUrl: "Unity/Build/GENIEAI_.wasm",
});

const [inputText, setInputText] = useState(""); // State to store the input text

const handleSendToBot = () => {
if (unityProvider) {
unityProvider.send("MyUnityGameObject", "sendtobot", inputText);
}
};

return (


<Unity unityProvider ={unityProvider } />
<input
type="text"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="Enter message"
/>
Send to Bot

);
};

export default UnityComponent;
the error is: Property 'send' does not exist on type 'UnityProvider'.

Would you be interested in contributing a fix?

  • yes, I would like to contribute a fix
commented

Its because send message has been shifted to returning object.
Check this


  const {
    unityProvider,
    isLoaded,
    loadingProgression,
    sendMessage,
    addEventListener,
    removeEventListener,
    requestFullscreen,
    takeScreenshot,
    unload,
  } = useUnityContext({
    loaderUrl: loaderUrl,
    dataUrl: buildUrl + "/Build _30_08.data",
    frameworkUrl: buildUrl + "/Build _30_08.framework.js",
    codeUrl: buildUrl + "/Build _30_08.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "DefaultCompany",
    productName: "Slotmachine test",
    productVersion: "0.1",
    showBanner: unityShowBanner,
    webglContextAttributes: {
      preserveDrawingBuffer: true,
    },
  });