How to add PlayCanvas game as react component

Help & Support
1

Im using Playcanvas from long time and React as well.
But Im not able to understand how do I include playcanvas game inside my react app?
Can anyone please help me how it should be done.

Following I did

  • Installed playcanvas
    npm install playcanvas
  • import pc from ‘playcanvas’
  • var app = new pc.Application(this.canvas, {});
    This does not succeed.

Any one please let me know how component bare shell looks like in react for playcanvas

2

Hello @basavaraj and welcome,

You can easily include a Playcanvas game inside your React app by using an iFrame:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Here is a helpful post with example code for the iframe solution:

3

I’m working on a set of React components that allow you to build a complete PlayCanvas game in a declarative, reactive manner. They’re part of a game I’m building, but the plan is to extract these to a public repository and NPM package when things feel stable enough.

See the screenshot in this tweet for an example:

3 Likes