https://github.com/fluidsonic/fluid-react
Highly experimental Kotlin wrapper for React
https://github.com/fluidsonic/fluid-react
kotlin kotlin-js kotlin-js-wrappers react reactjs
Last synced: 5 months ago
JSON representation
Highly experimental Kotlin wrapper for React
- Host: GitHub
- URL: https://github.com/fluidsonic/fluid-react
- Owner: fluidsonic
- License: apache-2.0
- Created: 2020-11-28T22:46:53.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-24T09:34:22.000Z (over 2 years ago)
- Last Synced: 2025-03-27T19:41:41.973Z (9 months ago)
- Topics: kotlin, kotlin-js, kotlin-js-wrappers, react, reactjs
- Language: Kotlin
- Homepage:
- Size: 307 KB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
fluid-react
===========
[](https://search.maven.org/artifact/io.fluidsonic.react/fluid-react)
[-blue.svg)](https://github.com/JetBrains/kotlin/releases/v1.8.22)
[-blue.svg)](https://www.npmjs.com/package/react/v/0.0.0-experimental-af1a4cbf7)
[](https://kotlinlang.slack.com/messages/C7UDFSVT2/)
Kotlin/JS wrapper for [React](https://reactjs.org/), [React Router](https://reactrouter.com/) and
[react-helmet-async](https://github.com/staylor/react-helmet-async).
- Similar to [kotlin-react](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react).
- Nicer and consistent API. Easier to use.
- Not multiplatform. Optimized for Kotlin/JS instead.
- Lower size and performance overhead.
- More type safety, esp. around hooks.
- With new Concurrent Mode in mind, thus depending on *experimental* React releases.
- Props allow `class` instead of just `external interface`.
- Updates of local properties delegated with `by useState(…)` are reflected immediately.
- Support for coroutines with `CoroutineScope(…) { … }`, `useCoroutineScope()` and `useFlow(…)`.
- `@DslMarker` colors.
- **Experimental** and IR compiler only. Relies on compiler-internal behavior until [KT-10468](https://youtrack.jetbrains.com/issue/KT-10468) is solved.
- **Contributions welcome 😃**
- [Kotlin/JS-optimized CSS library](https://github.com/fluidsonic/fluid-css) 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`:
```kt
dependencies {
implementation("io.fluidsonic.react:fluid-react-dom:0.13.0") // basis module
implementation("io.fluidsonic.react:fluid-react-coroutines:0.13.0") // optional coroutine support
implementation("io.fluidsonic.react:fluid-react-helmet:0.13.0") // optional dynamic metadata (react-helmet-async)
implementation("io.fluidsonic.react:fluid-react-router-dom:0.13.0") // optional routing (react-router)
}
```
## Example
```kt
import io.fluidsonic.react.*
import kotlinx.browser.*
fun main() {
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()
}
}
}
}
class EmojiContainerProps(val emoji: String)
```
Also check out the [playground](modules/playground) and run it from IntelliJ IDEA.