react embedding

[0dot77]

Hello!
I want to embed cables.gl work on my React Project.

I found some solution, but it didn't work. please help me!

1. If I use Iframe export, how can I sending data from web to iframe document? Is it possible?
2. If I use "zip export", how can I add to my react project?

• When I use MPA, that is work possible. but SPA is not working about single javascript file. Script is loaded OK, but not working.

If you have a example of React version, please share it!
Thank you ALL!

[steam0r]

when talking to an iframe you will need to set up communication using messages:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

the "iframe export" also isn't really an export, the patch will still reside on cables.gl server and change when you work on the patch. this is not really advised to do in a "production environment" where the other exports are more suited. you are then still free to embed your downloaded patch in an iframe though obviously.

regarding react, you might have some success with https://www.npmjs.com/package/react-script-tag but it has been some time since i last integrated cables into react/vue/...

[0dot77]

Thank you for your replied!!!!

I tried to use Iframe and PostMessage function, but i didn't send that messages. I want to access the iframe's child documents but I didn't. That time console alert to me that cross-origin problem.

I don't know why script tag is not working. i used script hook and render correctly, but cables gl patch didn't pop up.
How can I send some data from outside file to cables? Any other methods didn't here?
Other libraries work well, but cables javascript files don't work well.. I don't know why...
So, People are always work in only javascript environment? I think that's problem came from React rendering method...😭

[steam0r]

some more ressources:

https://cables.gl/docs/4_export_embed/cors/cors

talking to cables, in and out:

https://cables.gl/docs/4_export_embed/dev_embed_functions/dev_embed_functions
https://cables.gl/docs/4_export_embed/dev_embed_vars/dev_embed_vars

[0dot77]

Thank you I'll try that!! 👍

[steam0r]

if you manage to get a "reference implementation" working in react, please share here. thanks!

[0dot77]

You gave me that information is all about the Iframe, right?
I'm quite confused 🫠 Anyway thank you for your replied!

[steam0r]

hey,

i quickly created this small react component to load one or more patches to your website in react. might be useful for some people. let me know if this works for you.

https://github.com/undev-studio/cables_react

[0dot77]

wow! Thank you!! :)
I found solution and made with current react version and nextjs!!
so, i'll check your version and integrate that.
I'll upload my solution !!! Thank you for helping me!! 💯

[deankemball]

hey, how did you get this working in nextjs? i have some troubles with that. did you ever share your solution?