Components
It’s very easy to create a lightweight reusable component with fritz2:
val myComponent = render {
p {
text("This is the smallest valid stateless component")
myStore.data.bind()
}
}
fritz2 doesn’t force you to build your components a certain way - you can use every single Kotlin-language-feature you like. To create a component which can be called inside render-contexts directly, just specify the appropriate receiver RenderContext
:
fun RenderContext.myOtherComponent(person: Person): P {
return p {
+"Hello, my name is ${person.name}!"
}
}
val somePerson = Person(...)
render {
div {
myOtherComponent(somePerson)
}
}.mount("target")
// or with Flows
render {
div {
// caution: this re-renders everything when the person inside the Flow is changed
someflowOfPerson.render { person ->
div {
myOtherComponent(person)
}
}
}
}.mount("target")
To create more nested components do the following:
// needs to return a html element for using in render{} method directly
fun RenderContext.container(content: Div.() -> Unit): Div {
return div("container") {
content()
}
}
// don't need to return a html element because its used
// in HtmlElements context only
fun RenderContext.okBtn(content: Button.() -> Unit): Button {
return button("btn success") {
+"Ok"
content()
}
}
render {
container {
p {
text("Hello World!")
}
okBtn {
clicks handledBy someStore.someHandler
}
}
}.mount("target")
Since stateless components alone are not that exciting, go on and read about the fritz2 mechanism to handle state: the Store.