lördag 2 november 2019

Kotline React GH-pages app Stage 3

So the goal of step 3 is to bring in Material UI and use a simple component. Going for a Button doing something. The simple part is to include the package.
yarn add @material-ui/core 
But to use js libraries in kotlin is a bit complicated. For each component we need to define it in Button.kt:

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:

    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 }


Small changes from the original tweet: #dcb19ca8e1d7d84bf6cfc0c102a10a67405a811d

1 kommentar:

  1. If you'll be able to|you possibly can} pique people’s curiosity in trying out your courting profile, AV쏘걸 you’ll massively increase the variety of matches you get from individuals who you vibe with.