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.
https://react-unity-webgl.dev
Apache License 2.0
1.75k stars 162 forks source link

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

Open MuhammadHARIS46 opened 1 year ago

MuhammadHARIS46 commented 1 year ago

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 (

setInputText(e.target.value)} placeholder="Enter message" />

); };

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

Would you be interested in contributing a fix?

Progressive-Programmer commented 1 year ago

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,
    },
  });