Trying to combine code with react.ts

Help & Support
,
1

Hello everyone,

I’m trying to combine playcanvas code which is written on web editor into my react.ts project
I struggle to put that code to react project
any advice or example?

2

Hi @hannah and welcome,

Are you trying to move (copy/paste) some code scripts from the PlayCanvas editor to your local React project? Or are you trying to export a build from the PlayCanvas editor (scripts/models/textures/scene etc.) and add all that?

3

@Leonidas
I’m trying to move All codes from the PlayCanvas editor to my local React Project without Iframe

4

What’s the part you having trouble with?

5

Hello, Thanks your reply btw

I just got the code from other team to connect playcanvas source and react
the problem is our react is based on next.js with typescript probably the playcanvas code looks like under es6
we dont even get it how to connect both of them

6

I’m not sure about the file hierarchy setup and integration with react but if you want the canvas to be directly on a HTML page rather than an iframe, you will need to set Fill Mode in the PlayCanvas project to none so you can control the size of the canvas from the CSS styling on the page.

7

thanks your reply,

the problem is our company doesnt want to use iframe for connect playcanvas and react due to security problem

8

Even on the same domain?

9

yeah, I have to develop the code of playcanvas as a component in react

10

I’m afraid I don’t know enough about React to help with that unfortunately, hopefully someone else in the community can help