React specific wrapper for @ion-phaser-ce/core

Usage no npm install needed!

<script type="module">
  import ionPhaserCeReact from 'https://cdn.skypack.dev/@ion-phaser-ce/react';


IonPhaser CE for React


React specific wrapper for ion-phaser-ce component.


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 CE not cumbersome πŸ‘πŸ»


  • Import Phaser CE dependencies before, check the example here:
window.PIXI = require('phaser-ce/build/custom/pixi');
window.p2 = require('phaser-ce/build/custom/p2');
window.Phaser = require('phaser-ce/build/custom/phaser-split');
  • Using the IonPhaserCe component:
import React, { useState } from 'react'
import Phaser from 'phaser-ce'
import { IonPhaserCe } from '@ion-phaser-ce/react'

const game = {
  width: "100%",
  height: "100%",
  renderer: Phaser.AUTO,
  state: {
    init: function() {
      this.stage.backgroundColor = '#24252A';
    create: function() {
      this.helloWorld = this.add.text(
        "Hello World", { 
          font: "40px Arial", 
          fill: "#ffffff" 
    update: function() {
      this.helloWorld.angle += 1;

export default function App () {
  // Call `setInitialize` when you want to initialize your game as a component! :)
  const [initialize, setInitialize] = useState(false);
  return (
    <IonPhaserCe game={game} initialize={initialize} />

Supporting 🍻

I believe in Unicorns πŸ¦„ Support me, if you do too. Professionally supported @ion-phaser-ce/react is coming soon

Happy coding πŸ’―

Made with ❀️