Wrapper for React, React Router, and react-helmet-async, offering a consistent API with improved type safety and reduced performance overhead. Supports coroutines and Concurrent Mode.
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.
import io.fluidsonic.react.*
import kotlinx.browser.*
funmain() {
val body = checkNotNull(document.body)
val container = document.createElement("div").also(body::appendChild)
React.createRoot(container).render {
+"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()
}
}
}
}
classEmojiContainerProps(val emoji: String)
-blue.svg)
