Package Exports

react-unity-webgl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-unity-webgl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-unity-webgl

Easy to use Unity 5.6 or newer WebGL player component for your React application. Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication.

installation

Install using npm. Make sure you download the version matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the releases on GitHub for the corresponding version.

# example
$ npm install --save react-unity-webgl

usage

To get stated import the Unity component from 'react-unity-webgl'. Once imported you can use the Unity component to load in your Unity content. Place the Unity tag along with a src to the json file Unity exported.

Notice
Don't forget to add a script tag to load the UnityLoader.js file, exported by Unity in your base html file.

import React, { Component } from 'react';
import { Unity } from 'react-unity-webgl';

export class App extends Component {
    render() {
        return (<div className="app">
            <Unity src="Build/myGame.json" />
        </div>)
    }
}

communication

Unity allows you to send Javascript messages to the Unity content. In order to do so using React you have to import the Message function from 'react-unity-webgl'. The first parameter is the target game object name, the next is the method name, and the last is a optional parameter value.

import React, { Component } from 'react';
import { Message } from 'react-unity-webgl'

export class Menu extends Component {
    onClick () {
        Message ("myGameObjectName", "myMethodName", "paramterValue");
    }
    render() {
        return (<div className="menu">
            <div onClick={this.onClick.bind(this)}>
                Click me
            </div>
        </div>)
    }
}

styling

The player will be injected in the a component with the className "unity-container". To style to player use the following sass styling. To style the loader you can style the component with the className "unity-loader". See the example below.

.unity {
    .unity-container {
        canvas {
            
        }
    }
    .unity-loader {
        .bar {
            .fill {
                /* the width will be set by the component */
            }
        }
    }
}

html example

<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>My Unity Game</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="build_unity/Build/UnityLoader.js"></script>
    <script src="compiled/bundle.js"></script>
</html>