Moroboxai-player-react NPM

moroboxai-player-react

Embeddable player for running MoroboxAI games in React.

Installation

Using npm:

npm install moroboxai-player-react --save

Or:

git clone https://github.com/moroboxai/moroboxai-player-react.git
cd moroboxai-player-react
npm i
npm run build

Usage

Setup a simple React app with:

npx create-react-app my-app --template typescript

Add moroboxai-player-react as a dependency:

cd my-app
npm install moroboxai-player-react --save

Replace src/App.tsx with:

import "./App.css";
import Player from "moroboxai-player-react";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Player
                    url="https://raw.githubusercontent.com/moroboxai/moroboxai-games/master/games/pong/"
                    splashart="https://raw.githubusercontent.com/moroboxai/moroboxai-games/master/games/pong/assets/splashart.png"
                    width={256}
                    height={256}
                />
            </header>
        </div>
    );
}

export default App;

Build and start a local server to see the result:

npm run build
npm run start

Props

Name	Type	Default	Description
url	string		URL of the game
splashart	string		URL of the placeholder image displayed before the game is loaded
width	number		Width of the `div` element
height	number		Height of the `div` element
resizable	boolean	true	If the game can resize the player
className	string		Class name for the `div` container
autoPlay	boolean	false	Auto play the game after the player is initialized
speed	number	1	Speed of the game
onReady	func	noop	Signature: function() => void Function called when the game is loaded and ready
onMount	func	noop	Signature: function(player: IPlayer) => void Function called when the component is mounted