How to use node module in Kotlin React?

Question

I'm trying to use the bootstrap library. To do so, my first guess was to do the same as the Kotlin React tutorial : I managed to import the bootstrap library using npm import easily but then I struggle to actually use it and in particular to add arguments. As shown in the example:

@file:JsModule("react-bootstrap")
@file:JsNonModule

 import react.*

@JsName("Button")
external val ReactButton: ComponentClass<ReactButtonProps>

external interface ReactButtonProps : Props {
   var variant: String
   var size: String
}

Which indeed creates a button when used :

ReactButton {
  variant="primary"
  size = "lg"
  +"Exemple"
}

But the color and size aren't changing whatever argument I put. Then I tried to proceed like another topic on Stack Overflow: How to import node module in React-Kotlin? But I don't understand what RProps are and RClass and I can't seem to use them. My goal is to use a dropdown from Bootstrap but I thought trying with button first would have been easier. How do I make the button customizable?

Answer 1

Add this to your head tag in your index.html folder

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

make sure you have implementation(npm("react-bootstrap","2.4.0")) in your build.gradle.kts within your js dependencies