yarn add @material-ui/coreBut to use js libraries in kotlin is a bit complicated. For each component we need to define it in Button.kt:
@file:JsModule("@material-ui/core")
@file:JsNonModule
package materialUi
import org.w3c.dom.events.Event
import react.RProps
import react.RClass
// way 1
@JsName("Button") // because it was exported as default
external val Button : RClass;
external interface ButtonProps: RProps {
var className : String
var onClick: (Event?)->Unit
var color: String
var href: String
}
If you have any tips to make it easier this wrapping things feels a bit complicated:
Now on can us Material UI Button in App.kt but frist we need a state for the button to manipulate:#kotlin #react whats the thing with #wrappers mingodth is it really needed. I guess it gives purpose to wrapper builders.
— Patrik Gustafsson (@paven) November 1, 2019
interface APPstate : RState {
var ticker: Int;
}
fun APPstate.init(props: TickerProps) {
ticker = 0
}
Now for the button, and asmale change using the state in ticker.
override fun RBuilder.render() {
div("App-header") {
h2 {
+"The awesome Page"
}
}
p("App-ticker") {
Button { +"Timetravel"
attrs {
onClick = {
setState { ticker += 1 }
}
variant="contained"
}}
br{}
ticker(state.ticker)
}
}
Small changes from the original tweet: #dcb19ca8e1d7d84bf6cfc0c102a10a67405a811dStage 3: Now with imported #materialUI component!https://t.co/1jX2I3UaDP#1ede71e741050afcc7df3ac765a0416aa960fe31#kotlin #React #ghpages #project
— Patrik Gustafsson (@paven) November 1, 2019
Most helpful link: https://t.co/U9X5uEe7xJ
