react_gleam
React bindings for Gleam inspired by Lustre and ReasonReact.
import gleam/int
import react_gleam.{render}
import react_gleam/element.{Element, component, div, h1}
import react_gleam/hooks.{use_state}
import react_gleam/event.{on_click}
pub fn main() {
render(app)
}
fn app() -> Element {
div([], [
h1([], [text("Welcome to Gleam React!")]),
greet(name: "Joe"),
counter(count: 6)
])
}
fn greet(name name: String) -> Element {
div([], [text("Hello " <> name <> "!")])
}
fn counter(count init_count: Int) -> Element {
use <- component()
let #(count, set_count) = use_state(init_count)
div([], [
div(
[on_click(fn(_) { set_count(count + 1) })],
[text("+")]),
div(
[],
[int.to_string(count)]),
div(
[on_click(fn(_) { set_count(count - 1) })],
[text("-")]),
])
}
Installation
If available on Hex this package can be added to your Gleam project:
gleam add react_gleam
yarn add react react-dom