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?

1 Answer 1

0

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you ! it worked ! But as a beginner I don't exactly see why ... I don't exactly understand what this code does :/
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 [getbootstrap.com/docs/5.2/getting-started/introduction/… 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..
Ok i get it now ! Thank you so much !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.