Let you render some children into a different part of the DOM. Contrarily to JavaScript, create_portal returns a Result to avoid runtime error. Indeed, when the provided root does not exist in your HTML, create_portal fails. You should never assume create_portal will work out-of-the-box when you’re building a library. Otherwise, you could assert the resulting value in your application.

import redraw
import redraw/html
import redraw_dom/client

pub fn main() {
  let assert Ok(root) = client.create_root("app")
  client.render(app)
}

fn app() {
  let modal = modal()
  use <- redraw.component__("App")
  let assert Ok(modal) = client.create_portal(modal, "modal")
  html.div([], [html.text("Hello World!"), modal])
}

fn modal() {
  use <- redraw.component__("Modal")
  html.div([], [html.text("Inside the modal!")])
}

Documentation

Let you create a root to display React components inside a browser DOM node. Contrarily to JavaScript, create_root returns a Result to avoid runtime error. Indeed, when the provided root does not exist in your HTML, create_root fails. You should never assume create_root will work out-of-the-box when you’re building a library. Otherwise, you could assert the resulting value in your application.

import redraw_dom/client
pub fn main() {
  let assert Ok(root) = client.create_root("app")
  client.render(root, app())
}

Documentation

Let you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server. Contrarily to JavaScript, hydrate_root returns a Result to avoid runtime error. Indeed, when the provided root does not exist in your HTML, hydrate_root fails. You should never assume hydrate_root will work out-of-the-box when you’re building a library. Otherwise, you could assert the resulting value in your application.

import redraw_dom/client
pub fn main() {
  let assert Ok(root) = client.hydrate_root("app")
}

Documentation

Call render(root) to display a piece of JSX (“React node”) into the React root’s browser DOM node.

Documentation