Hi! I try to use kotlin with react and I fail to u...

# javascript

[donhilion]

Hi!
I try to use kotlin with react and I fail to use a 3rd party library. What I'd like to use is react-md. I guess, that I have to use the @JsModule annotation and build my own wrapper classes.
Is something like this the right way? (It is not working by the way because the number of parameters is not right.)

@JsModule("react-md/src/js/Cards/Card")
external val Card: RComponent<RProps, RState>
fun RBuilder.card() = child(Card::class) {}

[gildor]

I’m not sure that react-md/src/js/Cards/Card is correct way. I suppose it should be somethoing like react-md/lib/Cards/Card instead

[gildor]

And Cardprobably should be class:
external class Card(props: dynamic)

and then you define required properies and methods of this class.

[gildor]

I’m not familiar with this library, so cannot help in details, for exampl props constructor argumnet probably can use real type instead of dynamic, also Card extends other class or interface (PureComponent), maybe make sense to define it too as using external declaration

[donhilion]

Thank you!
You are correct. It should be /lib/Cards/Card
If I declare it as an external class, how can I use it in my render method?
I tried:

@JsModule("react-md/lib/Cards/Card")
external class Card: RComponent<CardProps, RState> {
    override fun RBuilder.render() = definedExternally
}

But an external class may not extend a non-external class and render cannot be defined externally.

I will invastigate it more in the evening.

[gildor]

Of course, it cannot

[gildor]

I don’t now context of react, so it’s hard for me to help, but external class must extend other external class, so you should recreate class hierarchy to use it

[donhilion]

In the reakt (react for kotlin) library you can define the rendering like this:

div("className") {
  h2 {
    +"Title"
  }
}

And the children need to extend a certain class.

[donhilion]

so div is a class and h2 is a class

[gildor]

but div and h2 is just kotlinx.html methods

[donhilion]

ah, then maybe I need to look there.
thank you

[gildor]

I don’t know how to use kotlin wrappers for react, but maybe you can somehow wrap react component

[gildor]

Something like this

[gildor]

https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/react/ReactComponent.kt#L131