		@@ -49,4 +49,4 @@ "use strict";
		// will be dispatched.
		if (htmlCanvasElement !== null) {
		unityContext.dispatchEvent("canvas", htmlCanvasElement);
		if (htmlCanvasElement.current !== null) {
		unityContext.dispatchEvent("canvas", htmlCanvasElement.current);
		}
		@@ -53,0 +53,0 @@ // The loaded event is dispatched.

package.json

		{
		"name": "react-unity-webgl",
		"version": "8.7.3",
		"version": "8.7.4",
		"description": "React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.",
		@@ -28,3 +28,3 @@ "keywords": [
		"type": "paypal",
		"url": "https://jeffreylanters.nl/support"
		"url": "https://paypal.me/jeffreylanters"
		}
		@@ -31,0 +31,0 @@ ],

README.md

		@@ -13,3 +13,3 @@ <div align="center">
		[![sponsors](https://img.shields.io/github/sponsors/jeffreylanters?color=E12C9A&style=for-the-badge)](https://github.com/sponsors/jeffreylanters)
		[![donate](https://img.shields.io/badge/support-donate-F23150?style=for-the-badge)](https://jeffreylanters.nl/support)
		[![donate](https://img.shields.io/badge/donate-paypal-F23150?style=for-the-badge)](https://paypal.me/jeffreylanters)

		@@ -50,3 +50,3 @@ When building content for the web, you might need to communicate with elements on a webpage. Or you might want to implement functionality using Web APIs which Unity does not currently expose by default. In both cases, you need to directly interface with the browser’s JavaScript engine. React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.
		- [Getting Started](#getting-started)
		- [Creating a Unity Context Object](#creating-a-unity-context-object)
		- [Understanding the Unity Context Object](#understanding-the-unity-context-object)
		- [Communication from React to Unity](#communication-from-react-to-unity)
		@@ -99,12 +99,23 @@ - [Communication from Unity to React](#communication-from-unity-to-react)

		## Creating a Unity Context Object
		## Understanding the Unity Context Object

		The core of rendering your Unity Application within your React Application is the Unity Context Object. This instance is where all the magic happens, and is used for configurating and sending and receiving messages from and to your Unity Application. If you haven't done so already, you'll first need a Unity WebGL build. Head over to [Creating Unity WebGL Builds](#creating-unity-webgl-builds) to learn more about this.
		When wanting to render a Unity Application within your React Application, you will need to pass along the Unity Context Object to the Unity Component. The Unity Context Object is the heart of the implementation. This is were all of your configuration, event listeners and references will be stored.

		A most basic Unity Context instance consists of a Unity Config with four properties. The `loaderUrl`: a JavaScript file contain the Unity Loader that the web page needs in order to load the Unity content, the `frameworkUrl`: a JavaScript file containing the runtime and plugin code, the `dataUrl`: a custom file containg your Assets and scenes, and the `codeUrl`: a Web Assembly binary file containg native code. Sounds complicated? No worries, you don't need to remember any of this. Just add the paths to the files to the Unity Context, sit back and enjoy!
		When passing the Unity Context Object to the Unity Component, it will take the configuration and starts loading the required resources in order to render your Unity Application. During this process, the Unity Context Object will be updated with the Unity Application's state and will invoke various events which can all be found in the documentation.

		The paths to these files are public paths and should be relative from your public root or `index.html`. They will be loaded during runtime due to their enourmous size, we do not want this in our bundle since this would have impact on our entire React Application. But no worries, you can use the built-in [loading progression tracking](#tracking-the-loading-progression) in order to show some sort of loading screen.
		> Make sure to create your Unity Context object either somewhere outside of your component, or in a component did mount cycle to prevent it from being created multiple times thus losing a reference to the Unity Instance.

		Feed your Unity Context to one or more Unity components to start and render your Unity Application!
		When creating a new Unity Context object, you'll need to pass a Unity Config boject. A most basic Unity Config consists the following four properties. These four properties are all URLs to the required Unity Build resources.

		- The Loader URL, this is a JavaScript file which contains the Unity Engine bootstrapping code. This file is required to load the Unity Engine and start the initialization process.
		- The Framework URL, this is a JavaScript file which contains the Runtime and Plugin code. This file is responsible for running the actual Unity Application.
		- The Data URL, this is a JSON file which contains the initial Unity Application state including your Assets and Scenes. This file can get big really fast so try to optimize your game's assets as much as possible. Try using both building and runtime compression techniques and usefull packages such as sprite atlasses.
		- The Code URL, this a Web Assembly binary file containg native code.

		There are many more properties you can pass to the Unity Config object. These properties are all optional and can be found in the documentation.

		Sounds complicated? No worries, you don't need to remember any of the meanings behind these files. The module will take care of all of this for you. Just add the paths to the files to the Unity Context, sit back and enjoy!

		> All of the URLs, including the ones mentioned above, are due to their enormous size NOT loaded into your bundle. You should place these files in a public directory within your project or use a CDN. This means the files behind these URLs are loaded during runtime and should be accessible by a the browser via a public URL.

		## Communication from React to Unity
		@@ -111,0 +122,0 @@

react-unity-webgl - npm Package Compare versions

Improved metrics