Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @ion-phaser/react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("phaser/package.json"); // phaser is a peer dependency. var react = require("@ion-phaser/react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@ion-phaser/react v1.2.2

React specific wrapper for @ion-phaser/core

IonPhaser for React

Introduction

React specific wrapper for ion-phaser component.

Why?

Most people who use React don’t use Web Components and there're some limitations handling data with Custom Components from React. Thus, this React component was created not to need to reference their Custom Elements using a ref and manually attach the game, this makes working with IonPhaser not cumbersome 👍🏻

Usage

import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'

class App extends Component {

  state = {
    initialize: true,
    game: {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {
        init: function() {
          this.cameras.main.setBackgroundColor('#24252A')
        },
        create: function() {
          this.helloWorld = this.add.text(
            this.cameras.main.centerX, 
            this.cameras.main.centerY, 
            "Hello World", { 
              font: "40px Arial", 
              fill: "#ffffff" 
            }
          );
          this.helloWorld.setOrigin(0.5);
        },
        update: function() {
          this.helloWorld.angle += 1;
        }
      }
    }
  }

  render() {
    const { initialize, game } = this.state
    return (
      <IonPhaser game={game} initialize={initialize} />
    )
  }
}

export default App;

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too. Professionally supported @ion-phaser/react is coming soon

Happy coding 💯

Made with ❤️

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free