Hey, I'm trying to learn kobweb by converting a su...

# kobweb

[bj0]

Hey, I'm trying to learn kobweb by converting a super basic old react/ts website to kobweb. It's using react-toastify, and I'm not really sure how to translate that over to kobweb. Is there a way to utilize react library components or do I have to rewrite it from scratch? The website doesn't seem to mention js library interop at all (though It was a bulletpoint in the kotlinconf talk).

[David Herman]

Feel free to share some code if that would be relevant. If your goal is to learn, I'd probably aim to not use react at all, but I can appreciate you might want to do that incrementally.

[David Herman]

I am pretty sure there are ways to wrap react into Kotlin/JS but I don't have any experience with that myself.

[bj0]

there isn't really any code to share, i just created the project and am looking at the old project trying to see what it uses and how I would re-create it in kobweb. I'm happy to not have to wrap react, but I'm curious what people do when they run into a library component (like react-toast) that they want to use

[David Herman]

I meant if you shared a react snippet maybe we can give advice about migrating that

[David Herman]

Wrapping js libraries in general is a pain but it's doable. You import it either through npm or some cdn link and then write manual bindings that wrap the code (but it's poorly documented so takes a lot of trial and error)

[bj0]

ohh, i mean it's just a single component so its just in the tree, like this:

[bj0]

then you just call a toast function anywhere in the code and a little toast notification pops up in that container

[bj0]

https://fkhadra.github.io/react-toastify/introduction/

[David Herman]

So one day Silk will add toasts but yeah we don't have it yet. You'd have to see how a toast component is implemented and rewrite it from scratch is my best recommendation

[bj0]

ah ok

[bj0]

oh, actually, looks like someone started that process with this: https://github.com/stevdza-san/KotlinBootstrap?tab=readme-ov-file#toast

[David Herman]

https://www.kumaran.me/ has a pop-up I believe. Usually it's a lot easier to do than you might think once you know the right css incantations

[David Herman]

Also yes I was going to mention bootstrap! Give that a shot and see if it works for you

[bj0]

cool, i'll try that

[bj0]

thanks

[Letter]

It is possible to integrate react libraries into a kobweb site using Preact. The Kobweb site actually does this for its search bar, though in that case the library provides a preact-powered version. It is however possible to integrate preact manually, see this older commit as an example. In general, you wouldn't want to deeply integrate React and Compose UI, but for standalone components like a toast or search it's doable. But if possible, I would usually prefer integrating a dom/html-based ui library or rewriting in Compose.