Skip to content

moroboxai/moroboxai-player-react

Repository files navigation

moroboxai-player-react

NPM version Node.js CI gitHub license Code Quality: Javascript Total Alerts

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

License

This content is released under the MIT License.