Hi, I just started to use react+kotlin using creat...

# react

[davide]

Hi, I just started to use react+kotlin using create-react-kotlin-app, I have one question: can I use existing module (eg. react-bootstrap) in my project?

[Filipp Riabchun]

Sure. You can start with this:

@JsModule("react-bootstrap/lib/Alert")
external val Alert: RClass<dynamic>

// then somewhere in your components
Alert {
  attrs {
    bsStyle = "warning"
  }

  +"Got an error"
}

Which roughly corresponds to this JSX:

<Alert bsStyle = "warning">Got an error</Alert>

[Filipp Riabchun]

Later, you can add some type-safety by replacing dynamic with some props spec based on propTypes or documentation (https://react-bootstrap.github.io/components.html#alerts)

external interface AlertProps: RProps {
  var bsClass: string
  var bsStyle: string
  var closeLabel: string
  var onDismiss: () => Unit
}

@JsModule("react-bootstrap/lib/Alert")
external val Alert: RClass<AlertProps>

Then if you try to do something like this, you'll get type errors at compile time

Alert {
  attrs {
    bsStyle = 100 // invalid value
    foo = true // invalid property
  }
}

[davide]

thanks! Really interesting! Now I’m working, but tonight I will try 🙂

[davide]

Hi Filipp, I’m sorry but it doesn’t work for me 😞 It adds the element to the UI, but if I declare an attribute I received the following error:

src/contact/ContactList.kt:46:21: error: unresolved reference: bsStyle
                    bsStyle = “warning”

My project was created with create-react-kotlin-app

[davide]

while using the second exaple, adding some type-safety by replacing `dynamic`type-safety, it works.