There are a ton of great ReactJS components. Is t...
# compose-web
e
There are a ton of great ReactJS components. Is there any way to use them in Compose for Web or does it require rewriting them?
b
I'm pretty sure it's possible. React is quite friendly when integrating with other frameworks
🎉 1
e.g. #kvision managed to do it quite successfully
e
If I could see an example or how to do that in Compose for Web, I’d probably start using Compose for Web right away.
b
Don't think there's any yet. Someone needs to step forward and give it a go. Although I'd use kotlin react instead of compose if you want react components anyways
On high level, you probably would mount react tree on some compose component. The tricky part is passing the state between the two.
Have a look at how kvision does it. Should give you at least some ideas.
e
I’m just putting my toe in the water…if someone else steps up on providing an example, I’d jump in.
I’m talking about using React components that are in npm, not my own. I’d convert my stuff to Jetpack Compose.
b
I understand, same situation
👍 2
o
We haven't tried using react components from compose yet. Although it seems possible. Here is related thread https://kotlinlang.slack.com/archives/C01F2HV7868/p1620128927052600?thread_ts=1620128927.052600&cid=C01F2HV7868 I would say the same approach would work for react components (in kotlin/js). We'll be happy to hear from you if you try it 🙂 We'll definitely explore such use cases further anyway.
I made a quick naive example (kind of PoC) https://github.com/JetBrains/compose-jb/tree/web-with-react-component-example/examples/web-with-react it integrates https://www.npmjs.com/package/react-youtube-lite (wraps it in @Composable) hope that gives some idea. Let us know if it's sufficient and what advanced examples you would like to see. UPD: https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/07_Using_Packages_From_NPM - this might help with making kotlin wrappers for components from npm
🙏 8
K 13
b
Blazing fast response, guys!
Turned out to be super simple. I kinda expected much dirtier hacks to achieve this!
👍 1
🎉 1
❤️ 1