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 justexternal 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 byRComponent.memo()
useequals()
to compare Props. You must ensure that your props implementequals()
in order to benefit from memoization. - Hook dependencies use
equals()
instead of===
. They don't need to be anArray
nor is the same amount of dependencies needed for each render. - Router routes are
exact
,strict
andsensitive
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)