react_gleam

React bindings for Gleam inspired by Lustre and ReasonReact.

react_gleam provides React bindings for Gleam giving you a type safe, and expressive React experience out of the box.

import gleam/int
import react_gleam.{component, render}
import react_gleam/element.{Element, div, text}
import react_gleam/hook.{use_state}
import react_gleam/event.{on_click}

pub fn main() {
  render(app(), "#app")
}

fn app() -> Element {
  div(
    [],
    [
      div([], [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(fn(_) { init_count })

  div(
    [],
    [
      div([on_click(fn(_) { set_count(fn(prev) { prev + 1 }) })], [text("+")]),
      div([], [text(int.to_string(count))]),
      div([on_click(fn(_) { set_count(fn (prev) { prev - 1 }) })], [text("-")]),
    ],
  )
}

Hooks

react_gleam supports the use_effect, use_state, use_reducer, use_memo, use_callback, use_id, use_transition, use_debug_value, use_ref, and use_context hooks from React as well as a use_url hook for simple routing.

Routing

react_gleam/router provides a use_url hook, push, and back function to enable basic routing.

import react_gleam.{component, render}
import react_gleam/element.{div, text}
import react_gleam/router.{use_url}

pub fn main() {
  render(app(), "#app")
}

fn app() {
  use <- component()

  let url = use_url()

  case url.path {
    [] -> div([], [text("home")]) // Matches /
    ["about"] -> div([], [text("about")]) // Matches /about
    _ -> div([], [text("404")]) // Matches everything else
  }
}

Installation

If available on Hex this package can be added to your Gleam project:

gleam add react_gleam

yarn add react react-dom