Integrating PlayCanvas in my react application

Help & Support
1

Hi pls I’m trying to integrate playcanvas in my react project.
Please how can I achieve this…
Thanks

2

Hello @Khadijah_Amusat ,

I had the same question a while back. I hope it helps!

2 Likes
3

Hello @Christina thank you so much.
Do you have it on GitHub or codepen ? so that I can make references to my work…

4

Your welcome!

I do have a project on GitHub that shows the communication between a PlayCanvas project and a web app but unfortunately it’s not React, but just a simple JavaScript project. But give this a look it might help

And here is the Playcanvas project: https://playcanvas.com/project/709901/overview/third-and-a-half

If you still have a hard time I can translate this project into a react app and upload it on GitHub for you to look :slight_smile:

2 Likes
5

@Christina I’m super grateful tbh, actually I think I’ll prefer it in react or explain how I want it to work. Do you mind a Google meet ?

1 Like
6

Glad to hear you found it helpful! Unfortunately, I don’t have the time for a meeting. The PlayCanvas team encourages posts and communication through the forum because that way all the information remains here for other people to search and learn from.

Make sure to study the older post I provided you above. Good luck and do post here in the forums if you have more questions/ issues !

3 Likes
7

The best approach depends on what you mean by “integrate”.
If you just want to run a playcanvas project which is hosted publically somewhere, and that only requires minimal communication between your React app and the Playcanvas app, then an iFrame will probably be best to use.

However, if you want to create a fully customized UI in react that should control all the communication neccessary with the playcanvas app, then you probably want to download all playcanvas assets to your repository and then generate a canvas using react, and then create a playcanvas instance during runtime, with your canvas as an input parameter.

That way you will have an instance of your pc app with access to all entities and assets in your project. Aswell as being able to communicate freely using react components.

8

Hi @maror757 thank you,I tried using an iframe and it worked but right now something keeps overiding my css as the iframe is not fully embedded on the screen. But once I set the height and width to 100vh and 100vh in my dev tools it works but it’s not working in my code

9

@Khadijah_Amusat You will need to provide some code from your project, or better yet an example project where you sandbox the issue in order for someone to figure out what might cause that issue.
Because that issue could originate from many things.

1 Like
10

import React from “react”;
import Iframe from ‘react-iframe’

function SelectAvatar(){

return(

<Iframe url="https://playcanv.as/b/vdnUEX7f/" styles={{"width":"100vw !important", "height":"100vh !important"}}

overflow=“hidden”
scrolling=“no”
frameBorder=“0”
border= “none”
margin=“0”
padding=“0”
position=“relative”
loading=“eager”

</div>

)

}

export default SelectAvatar;

the iframe component