Overloadable React components

JSX allows us to pass either string or another JSX element into attribute. Both options bellow are valid

<Container header="My header" />
<Container header={<h1>My header</h1>} />

I wanted to achieve the same effect in the Kotlin code:

Container(header = "My header")
Container(header = { h1 { +"My header" }})

I managed to make it work via two overloaded functions

fun RBuilder.Container(header: RBuilder.() -> Unit) {
  //..
}
fun RBuilder.Container(header: String) {
  //..
}

It works, but if I have more than one property, I will have to create bigger number of functions

fun RBuilder.Container(header: RBuilder.() -> Unit, content: RBuilder.() -> Unit)
fun RBuilder.Container(header: String, content: RBuilder.() -> Unit)
fun RBuilder.Container(header: RBuilder.() -> Unit, content: String)
fun RBuilder.Container(header: String, content: String)

For 3 different properties there will be 9 functions.

Is there a way to simplify this and create only one signature that accepts both String and RBuilder types?

[Leonya]

Well, there’s https://github.com/square/kotlinpoet

I personally would stick with fun RBuilder.Container(header: RBuilder.() -> Unit, content: RBuilder.() -> Unit) as the most flexible method and drop the rest.

[just-boris]

@Hypnosphi, @Leonya thank you for the kind answers! Will try to come up with some solution.