HenryKenya / fluid-react

Highly experimental Kotlin wrapper for React

fluid-react

Kotlin/JS wrapper for React.

• Similar to kotlin-react.
• Nicer and consistent API. Easier to use.
• Not multiplatform. Optimized for Kotlin/JS instead.
• No dependencies beside React.
• Lower size and performance overhead.
• More type safety, esp. around hooks.
• Props allow class instead of just external interface.
• @DslMarker colors.
• Highly experimental. IR compiler only. Relies on unofficial compiler behavior.
• Work in progress. Please contribute 😃
• Kotlin/JS-optimized CSS library with nice API in the works.

Notable differences in behavior

• Components created with react.component() are memoized by default unless they have children (react.componentWithChildren()).
• Memoization of components created with react.component() or added by RComponent.memo() use equals() to compare Props. You must ensure that your props implement equals() in order to benefit from memoization.
• Hook dependencies use equals() instead of ===. They don't need to be an Array nor is the same amount of dependencies needed for each render.
• Router routes are exact, strict and sensitive by default.

Installation

build.gradle.kts:

dependencies {
    implementation("io.fluidsonic.react:fluid-react-dom:0.9.0")
    implementation("io.fluidsonic.react:fluid-react-router-dom:0.9.0") // if you need routing
}

Example

import io.fluidsonic.react.*
import kotlinx.browser.*

fun main() {
    val body = checkNotNull(document.body)
    val container = document.createElement("div").also(body::appendChild)

    react.render(container) {
        +"Hello world"

        EmojiContainer(EmojiContainerProps("😍")) { strong { +"cool" } }
    }
}

val EmojiContainer by react.componentWithChildren { props: EmojiContainerProps, children ->
    var count by useState(3)

    useEffect(count) {
        val timerId = window.setTimeout({ count += 1 }, 2000)

        cleanup { window.clearTimeout(timerId) }
    }

    h1 { +"Your emoji, $count times 🎉" }
    button {
        attrs.onClick = { count += 1 }
        +"Add one"
    }
    ol {
        repeat(count) {
            li {
                +props.emoji
                +" "
                children()
            }
        }
    }
}

class EmojiContainerProps(val emoji: String)