Version 6.1.0

README.md

@@ -35,11 +35,22 @@ export class App extends React.Component {
 ```
 ## Optional attributes
 
+### Overruling the module
 ```js
-// Overruling the module
+this.myCustomModule = { ... }
 <Unity ... module={ this.myCustomModule } />
 ```
 
+### Tracking progression
+```js
+<Unity ... onProgress={ this.onProgress } />
+onProgress (progression) {
+    console.log (`Loading ${(progression * 100)} % ...`)
+    if (progression === 1) 
+        console.log (`Loading done!`)
+}
+```
+
 
 
 
@@ -120,25 +131,10 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E
 
 
 
-# Styling
-The following hierarchy will be applied to the React Unity WebGL component. Feel free to apply any styles to the component.
-
-```scss
-.unity {
-    .unity-container {
-        canvas {
-            /* don't forget to set my width and height! */
-        }
-    }
-    .unity-loader {
-        .loading-bar {
-            .loading-fill {
-                /* the width will be set by the component */
-            }
-        }
-    }
-}
-```
+# Notes
+Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile time. 
+## 5.x to 6.x Upgrade note
+When upgrading from 5.x to 6.x, make sure you add the `loader` prop to the Unity component and remove the script tag from your HTML page refering to the UnityLoader.js file. See [Usage](#usage) for further details.
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-unity-webgl",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A Unity WebGL component for your React application",
   "main": "lib/index.js",
   "scripts": {

source/Unity.js

@@ -5,15 +5,16 @@ export default class Unity extends Component {
     constructor (props) {
         super (props)
         this.state = {
-            progress: 0,
-            loaded: false,
             error: null
         }
         this.unityLoaderService = new UnityLoaderService ()
     }
     componentDidMount () {
         this.instantiate ()
     }
+    componentWillUnmount () {
+        this.unityLoaderService.unmount ()
+    }
     instantiate () {
         let error = null
 
@@ -28,36 +29,27 @@ export default class Unity extends Component {
         } 
         else {
             this.unityLoaderService.append (this.props.loader).then (() => {
-                module.exports.UnityInstance = UnityLoader.instantiate ('unity-container', this.props.src, {
-                    onProgress: ((gameInstance, progress) => {
-                        this.setState({
-                            loaded: progress === 1,
-                            progress: progress
-                        })
-                    }),
+                let unityInstance = UnityLoader.instantiate ('unity', this.props.src, {
+                    onProgress: this.onProgress.bind (this),
                     Module : this.props.module
                 })
+                module.exports.UnityInstance = unityInstance
             })
         }
     }
+    onProgress (unityInstance, progression) {
+        if (typeof this.props.onProgress !== 'undefined') {
+            this.props.onProgress (progression)
+        }
+    }
     render () {
-        if (this.state.error !== null) { return (
-            <div className='unity'>
-                <b>React-Unity-Webgl error</b> {this.state.error}
-            </div>
-        )}
         return (
             <div className='unity'>
-                <div>
-                    <div className='unity-container' id='unity-container'></div>
-                </div>
-                {this.state.loaded === false &&
-                    <div className='unity-loader'>
-                        <div className='bar'>
-                            <div className='fill' style={{ width:`${(this.state.progress * 100)}%`}}></div>
-                        </div>
-                    </div>
-                }
+                {this.state.error !== null ? (
+                    <b>React-Unity-Webgl error {this.state.error}</b>
+                ):(
+                    <div id='unity'></div>
+                )}
             </div>
         )
     }

source/UnityLoaderService.js

@@ -1,17 +1,23 @@
 export default class UnityLoaderServer {
     constructor () {
-
+        this.documentHead = document.getElementsByTagName ('head')[0]
+        this.unityLoaderScript = null
     }
     append (src) {
         return new Promise ((resolve, reject) => {
-            let unityLoaderScript = document.createElement ('script')
-            unityLoaderScript.type = 'text/javascript'
-            unityLoaderScript.async = true
-            unityLoaderScript.src = src
-            unityLoaderScript.onload = () => {
+            this.unityLoaderScript = document.createElement ('script')
+            this.unityLoaderScript.type = 'text/javascript'
+            this.unityLoaderScript.async = true
+            this.unityLoaderScript.src = src
+            this.unityLoaderScript.onload = () => {
                 resolve ()
             }
-            document.getElementsByTagName ('head')[0].appendChild (unityLoaderScript)
+            this.documentHead.appendChild (this.unityLoaderScript)
         })
     }
+    unmount () {
+        if (this.unityLoaderScript !== null) {
+            this.documentHead.removeChild (this.unityLoaderScript)
+        }
+    }
 }