0

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?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
levo-str
  • 3
  • 2

1 Answers1

0

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

Koch
  • 555
  • 4
  • 15
  • Thank you ! it worked ! But as a beginner I don't exactly see why ... I don't exactly understand what this code does :/ – levo-str Jun 14 '22 at 08:52
  • Glad I could help :D and we all gotta start somewhere, right ? Bootstrap and react-bootstrap are 2 different things. In order for react-bootstrap to work you need to install bootstrap either through npm or cdn according to their official page [https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start] Simply, react-bootstrap is like a set of React components built using Bootstrap (for styling), for example you can use a ready-made nav-bar, button etc.. – Koch Jun 14 '22 at 18:11
  • Ok i get it now ! Thank you so much ! – levo-str Jun 16 '22 at 13:00