plyo · niqitosiq · May 15, 2025 · May 19, 2025 · Jun 16, 2025 · Jun 16, 2025
diff --git a/.github/workflows/publish-module.yml b/.github/workflows/publish-module.yml
@@ -23,7 +23,7 @@ jobs:
           registry-url: https://registry.npmjs.org
       # Cache Node Module Dependencies
       - name: Cache Node Module Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: "module/node_modules"
           key: nodemodules-${{ runner.os }}-${{ hashFiles('module/package-lock.json') }}

diff --git a/.github/workflows/validate-documentation.yml b/.github/workflows/validate-documentation.yml
@@ -25,7 +25,7 @@ jobs:
           registry-url: https://registry.npmjs.org
       # Cache Node Module Dependencies
       - name: Cache Node Module Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: "documentation/node_modules"
           key: nodemodules-${{ runner.os }}-${{ hashFiles('documentation/package-lock.json') }}

diff --git a/.github/workflows/validate-module.yml b/.github/workflows/validate-module.yml
@@ -23,7 +23,7 @@ jobs:
           registry-url: https://registry.npmjs.org
       # Cache Node Module Dependencies
       - name: Cache Node Module Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: "module/node_modules"
           key: nodemodules-${{ runner.os }}-${{ hashFiles('module/package-lock.json') }}

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1 +1 @@
-- Add support for workerUrl (multithreading) [#575][#571]
+- Updated TypeScript compiler version and bumped packages.
diff --git a/documentation/docs/api/event-system.md b/documentation/docs/api/event-system.md
@@ -24,12 +24,12 @@ function removeEventListener(
 ```tsx title="Type Definition"
 function dispatchReactUnityEvent(
   eventName: string,
-  ...parameters: ReactUnityEventParameterType[]
+  ...parameters: UnityEventParameter[]
 ): void;
 ```
 
 ```tsx title="Type Definition"
-type ReactUnityEventParameter = string | number | undefined;
+type UnityEventParameter = any | undefined | void;
 ```
 
 ## Implementation

diff --git a/documentation/docs/api/get-metrics-info.md b/documentation/docs/api/get-metrics-info.md
@@ -0,0 +1,71 @@
+# Getting Metrics Info
+
+The `getMetricsInfo` function is used to retrieve information about the Unity Application's metrics, such as memory usage and frame rate. This can be useful for debugging and performance analysis.
+
+:::tip
+Use the built-in [Unity Metrics Info hook](/docs/api/use-unity-metrics-info) for a more convenient way to access metrics information in your React components.
+:::
+
+## Type Definition
+
+```tsx title="Type Definition"
+function getMetricsInfo(): UnityMetricsInfo | undefined;
+```
+
+## Implementation
+
+:::info
+The getMetricsInfo function is only available in Unity Builds created with Unity 6000.1 or later.
+:::
+
+Web builds can get quite large, and it can be useful to know how much memory is being used by the Unity Application. The `getMetricsInfo` function provides a way to retrieve this information. It returns an object containing various metrics, such as memory usage, frame rate, and more.
+
+To get started, destructure the getMetricsInfo function from the Unity Context.
+
+```jsx showLineNumbers title="Example: Destructuring the unload function"
+const { getMetricsInfo } = useUnityContext();
+```
+
+Next you'll be able to invoke the `getMetricsInfo` function to retrieve the metrics information. The function returns an object of type `UnityMetricsInfo`, which contains various properties related to the Unity Application's performance.
+
+```jsx showLineNumbers title="Example: Using the get metrics info function"
+async function handleClick() {
+  const metricsInfo = getMetricsInfo();
+}
+
+return <button onClick={handleClick}>Check metrics</button>;
+```
+
+## Example Usage
+
+A basic implementation could look something like this. In the following example we'll display a button which allows us to check the current frames per second (FPS) of the Unity Application. When the button is clicked, it will log the FPS to the console.
+
+```jsx showLineNumbers title="App.jsx"
+import React, { Fragment } from "react";
+import { Unity, useUnityContext } from "react-unity-webgl";
+
+function App() {
+  const { unityProvider, getMetricsInfo } = useUnityContext({
+    loaderUrl: "build/myunityapp.loader.js",
+    dataUrl: "build/myunityapp.data",
+    frameworkUrl: "build/myunityapp.framework.js",
+    codeUrl: "build/myunityapp.wasm",
+  });
+
+  function handleClickCheckFps() {
+    const metricsInfo = getMetricsInfo();
+    if (metricsInfo) {
+      console.log("FPS:", metricsInfo.fps);
+    } else {
+      console.warn("Metrics info is not available.");
+    }
+  }
+
+  return (
+    <Fragment>
+      <Unity unityProvider={unityProvider} />
+      <button onClick={handleClickCheckFps}>Check FPS</button>
+    </Fragment>
+  );
+}
+```
diff --git a/documentation/docs/api/send-message.md b/documentation/docs/api/send-message.md
@@ -11,12 +11,12 @@ The send message function lets you asynchronously invoke a method in the Unity g
 function sendMessage(
   gameObjectName: string,
   methodName: string,
-  parameter?: ReactUnityEventParameterType
+  parameter?: UnityMessageParameter
 ): void;
 ```
 
 ```tsx title="Type Definition"
-type ReactUnityEventParameter = string | number | undefined;
+type UnityMessageParameter = string | number | undefined | void;
 ```
 
 ## Implementation
@@ -32,7 +32,7 @@ When invoking a C-Sharp method by sending a message, the name of the mono behavi
 :::
 
 :::warning
-Make sure the parameter matches the actual existence and type of the C-Sharp method you're trying to invoke. Not 
+Make sure the parameter matches the actual existence and type of the C-Sharp method you're trying to invoke. Not
 doing so may cause unintended behaviour or even a crash of the Unity Application.
 :::
 

diff --git a/documentation/docs/api/unload.md b/documentation/docs/api/unload.md
@@ -2,6 +2,10 @@
 
 Requests the Unity Application to be unloaded from memory in order to be unmounted from the DOM.
 
+:::warning
+Since React Unity WebGL version 10, calling the unload function is no longer required to unmount the Unity Application. The Unity Application will automatically be unmounted when the component is removed from the DOM. However, if you want to unload the Unity Application manually, you can still use the unload function. But be aware that this is not necessary in most cases.
+:::
+
 ## Type Definition
 
 ```tsx title="Type Definition"
@@ -14,14 +18,6 @@ function unload(): Promise<void> | undefined;
 The unload function is only available in Unity Builds created with Unity 2020.1 or later.
 :::
 
-:::danger
-In earlier versions of Unity, it was possible to unmount the Unity Application and its containing component immediately after invoking the unload function. However, due to a bug in newer Unity versions, this is no longer feasible when using builds made with Unity 2021.2 or later. While it is still possible to unload the Unity Application, the canvas must remain mounted until the associated promise is resolved.
-
-As of this writing, the issue has not been resolved. However, it is possible to manually unmount the Unity Application by halting navigation to the next page. A ticket has been submitted, and the Unity team has acknowledged this as a known issue. For more details, refer to the [GitHub issue](https://github.com/jeffreylanters/react-unity-webgl/issues/250).
-
-Alternatively, you can use the unsafe `detachAndUnloadImmediate` function to immediately unmount the Unity Application. However, this is not recommended unless you are an advanced user. For more information, refer to the [Unsafe Detach and Unload Immediate](/docs/api/unsafe-detach-unmount-immediate) documentation.
-:::
-
 When building a multi-page React Application, it is important to unload the Unity Application in order to completely unmount the component from the DOM to free up the memory taken by the Unity JavaScript heap, and without Unity throwing an error. Invoking the function will request the Unity Application to be unloaded from memory. The function will return a Promise that will be resolved when the Unity Application has been unloaded.
 
 To get started, destructure the unload function from the Unity Context.
@@ -32,7 +28,7 @@ const { unload } = useUnityContext();
 
 Next you'll be able to invoke the awaitable unload function to unload the Unity Application.
 
-```jsx showLineNumbers title="Example: Using the take screenshot function"
+```jsx showLineNumbers title="Example: Using the unload function"
 async function handleClick() {
   await unload();
 }
@@ -42,7 +38,7 @@ return <button onClick={handleClick}>Unload</button>;
 
 ## Example Usage
 
-A basic implementation could look something like this. In the following example we'll display a button which allows the user to navigate to another page, but before this happens, the Unity Application will be unloaded.
+A basic implementation could look something like this. In the following example we'll display a button which allows the user to stop the Unity Application. When the button is clicked, it will invoke the unload function to unload the Unity Application from memory.
 
 ```jsx showLineNumbers title="App.jsx"
 import React, { Fragment } from "react";
@@ -56,15 +52,14 @@ function App() {
     codeUrl: "build/myunityapp.wasm",
   });
 
-  async function handleClickBack() {
+  async function handleClickStop() {
     await unload();
-    // Ready to navigate to another page.
   }
 
   return (
     <Fragment>
       <Unity unityProvider={unityProvider} />
-      <button onClick={handleClickBack}>Back</button>
+      <button onClick={handleClickStop}>Stop</button>
     </Fragment>
   );
 }

diff --git a/documentation/docs/api/use-unity-metrics-info.md b/documentation/docs/api/use-unity-metrics-info.md
@@ -0,0 +1,73 @@
+# Using Metrics Info
+
+The `useUnityMetricsInfo` hook is a part of the `react-unity-webgl` library that allows you to access metrics information from your Unity application. This can be particularly useful for monitoring performance and resource usage in your Unity WebGL builds.
+
+## Type Definition
+
+```tsx title="Type Definition"
+function useUnityMetricsInfo(
+  getMetricsInfo: () => UnityMetricsInfo | undefined,
+  metricsConfig: MetricsConfig
+): UnityMetricsInfo;
+```
+
+## Implementation
+
+:::info
+The getMetricsInfo function is only available in Unity Builds created with Unity 6000.1 or later.
+:::
+
+Web builds can get quite large, and it can be useful to know how much memory is being used by the Unity Application. The `getMetricsInfo` function provides a way to retrieve this information. It returns an object containing various metrics, such as memory usage, frame rate, and more.
+
+The `useUnityMetricsInfo` hook is a custom React hook that allows you to easily access the metrics information from your Unity application. It takes the `getMetricsInfo` function as an argument and returns the metrics data.
+
+To get started, destructure the getMetricsInfo function from the Unity Context.
+
+```jsx showLineNumbers title="Example: Destructuring the unload function"
+const { getMetricsInfo } = useUnityContext();
+```
+
+Next you'll create a new hook that uses the `getMetricsInfo` function to retrieve the metrics information. This hook can be used to access the metrics data throughout your application.
+
+```tsx showLineNumbers title="Example: Using the useUnityMetricsInfo hook"
+const metricsInfo = useUnityMetricsInfo(getMetricsInfo);
+```
+
+:::tip
+You can provide additional configuration options through the `metricsConfig` parameter, such as setting the interval for metrics updates.
+:::
+
+Finally, you can use the `metricsInfo` object to access the metrics data. This object will contain properties such as `fps`, `pageLoadTime`, and others, depending on what metrics are available in your Unity build.
+
+```tsx showLineNumbers title="Example: Accessing metrics data"
+<p>FPS: {metricsInfo.fps}</p>
+```
+
+## Example Usage
+
+A basic implementation could look something like this. In the following example we'll display the FPS (frames per second) of the Unity application.
+
+```jsx showLineNumbers title="App.jsx"
+import React, { Fragment } from "react";
+import { Unity, useUnityContext, useUnityMetricsInfo } from "react-unity-webgl";
+
+function App() {
+  const { unityProvider, getMetricsInfo } = useUnityContext({
+    loaderUrl: "build/myunityapp.loader.js",
+    dataUrl: "build/myunityapp.data",
+    frameworkUrl: "build/myunityapp.framework.js",
+    codeUrl: "build/myunityapp.wasm",
+  });
+
+  const { fps } = useUnityMetricsInfo(getMetricsInfo, {
+    interval: 1000 / 60,
+  });
+
+  return (
+    <Fragment>
+      <Unity unityProvider={unityProvider} />
+      <p>FPS: {fps}</p>
+    </Fragment>
+  );
+}
+```
diff --git a/documentation/docs/introduction.md b/documentation/docs/introduction.md
@@ -1,7 +1,7 @@
 # Introduction
 
-Welcome to the React Unity WebGL documentation! My name is [Jeffrey Lanters](https://twitter.com/jeffreylanters), and I'm here to help you bring your awesome games to the web! Everything you'll need to know from get started to creating complex interactive systems can be found in this documentation. If you'll need help, feel free to open a new [discussion](https://github.com/jeffreylanters/react-unity-webgl/discussions), when you want to contribute or think you've found a problem, feel free to open a new [issue](https://github.com/jeffreylanters/react-unity-webgl/issues). And if you like what you see, please consider [starring this repository](https://github.com/jeffreylanters/react-unity-webgl/stargazers) or by [suporting the project](https://react-unity-webgl.dev/support)!
+Welcome to the React Unity WebGL documentation! My name is [Jeffrey Lanters](https://jeffreylanters.me), and I'm here to help you bring your awesome games to the web! Everything you'll need to know from get started to creating complex interactive systems can be found in this documentation. If you'll need help, feel free to open a new [discussion](https://github.com/jeffreylanters/react-unity-webgl/discussions), when you want to contribute or think you've found a problem, feel free to open a new [issue](https://github.com/jeffreylanters/react-unity-webgl/issues). And if you like what you see, please consider [starring this repository](https://github.com/jeffreylanters/react-unity-webgl/stargazers) or by [suporting the project](https://react-unity-webgl.dev/support)!
 
-If you're stuck or need professional assistance and are looking for personal help over a video call, feel free to reach out to me on [Twitter](https://twitter.com/jeffreylanters) or send me an email to [support@jeffreylanters.me](mailto:support@jeffreylanters.me).
+If you're stuck or need professional assistance and are looking for personal help over a video call, feel free to reach out to me on [GitHub](https://github.com/jeffreylanters) or send me an email to [support@jeffreylanters.me](mailto:support@jeffreylanters.me).
 
 Happy coding! 🚀
diff --git a/...ressed-builds-and–server-configuration.md → ...ressed-builds-and-server-configuration.md b/...ressed-builds-and–server-configuration.md → ...ressed-builds-and-server-configuration.md
diff --git a/documentation/docs/upgrading.md b/documentation/docs/upgrading.md
@@ -0,0 +1,7 @@
+# Upgrading from version 9
+
+Version 10 is fully compatible with version 9, so you can upgrade without any issues. Version 10 introduces new features and improvements, but it does not break any existing functionality. However, there is one change you should be aware of:
+
+The long-standing unloading issue Unity introduced in Unity 2021.2 has been resolved in React Unity WebGL version 10. This means that you no longer need to call the [unload](/docs/api/unload) function to unmount the Unity Application when using React Unity WebGL version 10.
+
+Happy coding!
diff --git a/documentation/docusaurus.config.js b/documentation/docusaurus.config.js
@@ -31,13 +31,19 @@ const config = {
           lastVersion: "current",
           versions: {
             current: {
-              label: "Current version",
+              label: "Version 10 (Current)",
               banner: "none",
               badge: true,
               path: "",
             },
+            "9.x.x": {
+              label: "Version 9 (Maintenance LTS)",
+              banner: "unmaintained",
+              badge: true,
+              path: "9.x.x",
+            },
             "8.x.x": {
-              label: "Version 8 (Active LTS)",
+              label: "Version 8 (Maintenance LTS)",
               banner: "unmaintained",
               badge: true,
               path: "8.x.x",
@@ -81,8 +87,8 @@ const config = {
     announcementBar: {
       id: "support_me",
       content:
-        'The project is in financial need of support, if you use my module and are able, please considing <a href="/support">supporting</a> in any way you can. Thank you! ❤️',
-      backgroundColor: "#AB2329",
+        "Donations are helping me to keep this project maintained, if you find this project useful, please consider <a href='/support'>supporting</a> it. Thank you! ❤️",
+      backgroundColor: "#238babff",
       textColor: "#ffffff",
       isCloseable: false,
     },
@@ -109,11 +115,21 @@ const config = {
           position: "left",
           label: "Made With",
         },
+        {
+          to: "/tutorials",
+          position: "left",
+          label: "Tutorials",
+        },
         {
           to: "/support",
           position: "left",
           label: "Support",
         },
+        {
+          to: "https://template.react-unity-webgl.dev",
+          position: "right",
+          label: "Demo",
+        },
         {
           type: "docsVersionDropdown",
           position: "right",
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		- Add support for workerUrl (multithreading) [#575][#571]
		- Updated TypeScript compiler version and bumped packages.