Use React inside of Phaser 3 (with TypeScript) example

Examples
#1

Quick example on how to use React in Phaser 3

Feature

  • Send events between Phaser and React
  • Access Phaser scene inside any React component
  • Scales with Phaser’s ScaleManger

Bug (solved)

  • [SOVLED in #1361] When the Keyboard in open on a mobile phone, the Game resizes
  • [SOVLED in #1656] Don’t know how to make something similar to this “this.input.setTopOnly(true)” work
3 Likes
Phaser in React
How do I play online with react js + phaser 3 + socket.io?
Vue + Phaser 3 and Html tags for UI
Click on div under phaser object
#2

Please don’t use ids from React, Angular, Vue, etc, that’s not a good practice working with components and navigating between screens in any framework, check this WebComponent instead => https://github.com/proyecto26/ion-phaser

1 Like
#3

What do you mean by id?

1 Like
#4

manipulating the DOM directly by using <div id="phaser"></div> instead of using components with these frameworks :slight_smile:

#5

Sorry for the late response. I know what you mean, but this does not apply to this example.

Maybe you did not go through the code. I do not manipulate <div id="phaser"></div> from within a react app. Unlike you do in ion-phaser, I use a react instance inside a phaser scene, and use the react components as user UI for the phaser game.

So the main difference with ion-phaser and my example is, that my example is not a react app, its a phaser game written in typescript which uses react as a UI.

Please see the mainScene.tsx to see how it works.