🥮 mooncakes.io

react

Type-safe MoonBit bindings for React with virtual DOM, hooks, and CSS-in-JS support (early experimental)

react
binding
Download zip
Author
Version
0.0.3
License
Apache-2.0
Repository
Last updated
10 months ago
Downloads
28

Dependencies

#tiye/react

React bindings for MoonBit

#Project Status

🚧 This is an early project

This is an experimental hobby project exploring MoonBit bindings for React. The API is unstable and may change frequently. Not recommended for production use. This project is intended for technical exploration and learning purposes only.

#Bound APIs and Types

#Core Rendering API

  • render(vdom: VirtualNode, parent: @dom.Element) -> Unit - Render virtual DOM to specified parent element
  • component[T: JsValueTrait](f: (T) -> VirtualNode, props: T, children: Array[VirtualNode]) -> VirtualNode - Create component

#Hooks API

  • use_state[T](initial: T) -> (T, (T) -> Unit) - State management hook
  • use_reducer[S: Default, A](initial?: S, reducer: (S, A) -> S) -> (S, (A) -> Unit) - Reducer hook
  • use_effect_once(effect: () -> Unit) -> Unit - Effect hook that runs only once
  • use_effect_deps(effect: () -> Unit, deps: Array[JsObscure]) -> Unit - Effect hook with dependencies
  • use_layout_effect_deps(effect: () -> Unit, deps: Array[JsObscure]) -> Unit - Layout effect hook
  • use_memo_deps[A](factory: () -> A, deps: Array[JsObscure]) -> A - Memoization hook
  • use_callback_deps[F](callback: F, deps: Array[JsObscure]) -> F - Callback memoization hook
  • use_callback0_deps(f: () -> Unit, deps: Array[JsObscure]) -> () -> Unit - Zero-argument callback hook
  • use_ref[T: JsValueTrait](initial: T) -> ReactRef[T] - Reference hook
  • obscure[T](v: T) -> JsObscure - Dependency conversion helper function

#HTML Element Bindings

  • div, span, p, h1, h2, h3 - Basic text elements
  • button, input, textarea, select, option - Form elements
  • a, img, video, audio - Media and link elements
  • ul, ol, li - List elements
  • section, article, header, footer, nav, aside - Semantic elements
  • label - Label element

#Event Handling

  • DOMEvent type and its methods:
    • target_value() -> String - Get form element value
    • key() -> String, key_code() -> Int - Keyboard events
    • client_x() -> Int, client_y() -> Int - Mouse coordinates
    • prevent_default(), stop_propagation() - Event control
    • ctrl_key(), shift_key(), alt_key(), meta_key() -> Bool - Modifier key detection

#Styles and Attributes

  • ElementAttrs - HTML attribute management
  • ElementEvents - Event handler management
  • RespoStyle - CSS styles (from @css module)
  • InputType enum - Support for all HTML input types

#Virtual DOM Types

  • VirtualNode - Base virtual node type
  • VirtualElement - Virtual element type
  • Text(String) - Text node

#Quick Start

Before writing any MoonBit code, make sure to include the React bindings in your project.

import * as React from "react";
import * as ReactDOMClient from "react-dom/client";

window.React = React;
window.ReactDOMClient = ReactDOMClient;

Here's a simple example of how to use this library:

// Define your component props
struct ContainerProps {} derive(Default)

// Implement JsValueTrait for props
impl @react.JsValueTrait for ContainerProps with to_value(_self) -> @dom.JsObscure {
  @react.JsObject::new().to_value()
}

impl @react.JsValueTrait for ContainerProps with from_value(
  _value : @dom.JsObscure,
) -> ContainerProps {
  ContainerProps::default()
}

// Create a functional component
fn comp_container(_v : ContainerProps) -> @react.VirtualNode {
  let (counter, set_counter) = @react.use_state(0.0.to_float())

  @react.div(
    id="container",
    style=@css.respo_style(
      color=Blue,
      font_family="Arial",
      padding=10.0 |> Px
    ),
    on_click=fn(_) {
      println("clicked \{counter}")
      set_counter(counter + 1.0)
    },
    [
      @react.Fragment([@react.Text("Demo: ")]),
      @react.Text("Counter \{counter}")
    ],
  )
}

// Render to DOM
fn main {
  let window = @dom.window()
  let doc = window.document()
  let body = doc.body()
  let props = ContainerProps::default()

  @react.render(
    @react.component(comp_container, props, []),
    body,
  )
  println("loaded")
}

#Features

  • Type-safe virtual DOM construction
  • React-style hooks (useState)
  • CSS-in-JS styling support
  • Event handling
  • Component composition

#Project Status

This is an early project exploring MoonBit bindings for React. The API is subject to frequent changes and breaking updates. Use at your own risk!

#License

Apache 2.0

DOMEvent

source
pub type DOMEvent

DOMEvent::alt_key

source
fn DOMEvent::alt_key(self : DOMEvent) -> Bool

检查是否按下了 Alt 键

DOMEvent::client_x

source
fn DOMEvent::client_x(self : DOMEvent) -> Int

获取鼠标事件的 X 坐标

DOMEvent::client_y

source
fn DOMEvent::client_y(self : DOMEvent) -> Int

获取鼠标事件的 Y 坐标

DOMEvent::ctrl_key

source
fn DOMEvent::ctrl_key(self : DOMEvent) -> Bool

检查是否按下了 Ctrl 键

DOMEvent::key

source
fn DOMEvent::key(self : DOMEvent) -> String

获取键盘事件的键值

DOMEvent::key_code

source
fn DOMEvent::key_code(self : DOMEvent) -> Int

获取键盘事件的键码

DOMEvent::meta_key

source
fn DOMEvent::meta_key(self : DOMEvent) -> Bool

检查是否按下了 Meta 键（Mac 上的 Cmd 键）

DOMEvent::prevent_default

source
fn DOMEvent::prevent_default(self : DOMEvent) -> Unit

阻止事件的默认行为

DOMEvent::shift_key

source
fn DOMEvent::shift_key(self : DOMEvent) -> Bool

检查是否按下了 Shift 键

DOMEvent::stop_propagation

source
fn DOMEvent::stop_propagation(self : DOMEvent) -> Unit

阻止事件冒泡

DOMEvent::target_value

source
fn DOMEvent::target_value(self : DOMEvent) -> String

获取事件目标元素的值（通常用于 input、textarea 等表单元素）

DOMEvent::to_js_obscure

source

DOMEventType

source
pub(all) enum DOMEventType {
  Click
  DoubleClick
  MouseDown
  MouseUp
  MouseMove
  MouseEnter
  MouseLeave
  MouseOver
  MouseOut
  ContextMenu
  KeyDown
  KeyUp
  KeyPress
  Input
  Change
  Submit
  Reset
  Focus
  Blur
  Select
  Load
  Unload
  Resize
  Scroll
  Drag
  DragStart
  DragEnd
  DragEnter
  DragLeave
  DragOver
  Drop
  TouchStart
  TouchMove
  TouchEnd
  TouchCancel
  Error
  Abort
  CanPlay
  CanPlayThrough
  DurationChange
  Ended
  LoadedData
  LoadedMetadata
  LoadStart
  Pause
  Play
  Playing
  Progress
  RateChange
  Seeked
  Seeking
  Stalled
  Suspend
  TimeUpdate
  VolumeChange
  Waiting
}

DOM 事件类型枚举
impl Eq for DOMEventType

DOMEventType::to_string

source
fn DOMEventType::to_string(self : DOMEventType) -> String

将 DOMEventType 转换为字符串

ElementAttrs

source
pub type ElementAttrs Map[String, String]

ElementAttrs::add

source
fn ElementAttrs::add(self : ElementAttrs, key : String, value : String) -> ElementAttrs

ElementAttrs::inner

source
#deprecated("Use `struct T(A)` to declare a newtype and use `.0` access the underlying type instead.")
fn ElementAttrs::inner(self : ElementAttrs) -> Map[String, String]
Convert newtype to its underlying type, automatically derived.

ElementAttrs::new

source

ElementAttrs::set

source
fn ElementAttrs::set(self : ElementAttrs, key : String, value : String) -> Unit

ElementEvents

source
type ElementEvents

ElementEvents::add

source
fn ElementEvents::add(self : ElementEvents, event_type : DOMEventType, value : (DOMEvent) -> Unit) -> ElementEvents

使用 DOMEventType 添加事件处理器

ElementEvents::new

source

ElementEvents::set

source
fn ElementEvents::set(self : ElementEvents, event_type : DOMEventType, value : (DOMEvent) -> Unit) -> Unit

使用 DOMEventType 设置事件处理器

ElementEvents::to_js_value

source

InputType

source
pub(all) enum InputType {
  Button
  Checkbox
  Color
  Date
  DatetimeLocal
  Email
  File
  Hidden
  Image
  Month
  Number
  Password
  Radio
  Range
  Reset
  Search
  Submit
  Tel
  Text
  Time
  Url
  Week
}

HTML input element type enumeration based on MDN specification https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input
impl Eq for InputType

InputType::to_string

source
fn InputType::to_string(self : InputType) -> String

Converts InputType enum to its corresponding HTML string value

ReactRef

source
type ReactRef[T]

ReactRef::from

source
fn[T] ReactRef::from(v : T) -> ReactRef[T]

ReactRef::get

source
fn[T] ReactRef::get(self : ReactRef[T]) -> T

ReactRef::set

source
fn[T] ReactRef::set(self : ReactRef[T], value : T) -> Unit

VirtualElement

source
pub struct VirtualElement {
  name : String
  attrs : ElementAttrs
  event : ElementEvents
  style : 
RespoStyle
  children : Array[VirtualNode]
}

Represents a virtual DOM element with all its properties and children.

This structure encapsulates all the information needed to create and manage a DOM element in the virtual DOM tree, including its tag name, attributes, event handlers, styles, and child nodes.

VirtualElement::to_node

source

VirtualNode

source
pub(all) enum VirtualNode {
  Element(VirtualElement)
  Fragment(Array[VirtualNode])
  Text(String)
  JsNode(
JsObscure)
}

Represents a virtual DOM node in the React rendering system.

This is the core type for building virtual DOM trees. Each variant represents a different kind of node that can be rendered to the actual DOM.

VirtualNode::to_js_obscure

source

fn a(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, href? : String, target? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an a element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an a element.

article

source
fn article(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an article element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an article element.

aside

source
fn aside(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an aside element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an aside element.

audio

source
fn audio(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], src? : String, controls? : Bool, autoplay? : Bool, loop_enabled? : Bool, muted? : Bool, on_play? : (DOMEvent) -> Unit, on_pause? : (DOMEvent) -> Unit) -> VirtualNode

Creates an audio element with the specified attributes, event handlers, and audio properties.

Returns a virtual DOM node representing an audio element.

button

source
fn button(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, button_type? : String, disabled? : Bool, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a button element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a button element.

component

source
fn[T] component(f : (T) -> VirtualNode, props : T, children : Array[VirtualNode]) -> VirtualNode

Creates a component virtual node from a function, props, and children.

This bridges MoonBit component functions with React's rendering system, enabling type-safe component creation with strongly-typed props.

Example

struct ButtonProps {
  text : String
  disabled : Bool
} derive(Default)

fn my_button(props : ButtonProps) -> VirtualNode {
  button(disabled=props.disabled, [Text(props.text)])
}

let node = component(my_button, ButtonProps { text: "Click me", disabled: false }, [])

console_log2

source
fn console_log2(msg : String, v : 
JsObscure) -> Unit

contained_static_style

source
#callsite(autofill(loc))
fn[U : Show] contained_static_style(rules : Array[(String?, U, 
RespoStyle)], loc~ : SourceLoc) -> String

Declare a static style in the head of the documentm for example
let style_demo : String = contained_static_style(
 [(Some("@media only screen and (max-width: 600px)"), "&", respo_style(margin=4 |> Px, background_color=Hsl(200, 90, 96)))],
)

convert_prop_value

source
fn convert_prop_value(prop_name : String, value : String) -> 
JsObscure

Converts string values to appropriate JavaScript values for React props. Handles boolean attributes by converting "true"/"false" strings to actual booleans.

Parameters

  • prop_name: React property name.
  • value: String value from the attribute.

Returns

JsObscure - Properly typed JavaScript value for React.

Inspect Examples

inspect(convert_prop_value("checked", "true"), content="JsObscure::from_bool(true)") inspect(convert_prop_value("className", "my-class"), content="JsObscure::from_string("my-class")")

convert_style_to_js_object

source

create_element

source
fn create_element(name : String, attrs : ElementAttrs, event : ElementEvents, style~ : 
RespoStyle, children : Array[VirtualNode]) -> VirtualElement

Creates a virtual DOM element with the specified properties.

This is the internal implementation used by built-in element functions like div, span, etc. It can also be used to create custom HTML elements that are not provided by the library.

Parameters

  • name: HTML tag name (e.g., "div", "span", "custom-element")
  • attrs: Element attributes
  • event: Event handlers
  • style: CSS styles
  • children: Child virtual nodes

Example

// Create a custom element
let _custom_elem = create_element(
  "my-custom-element",
  ElementAttrs::new(),
  ElementEvents::new(),
  style=@css.respo_style(),
  [Text("Custom content")]
)

css_prop_to_camel_case

source
fn css_prop_to_camel_case(name : String) -> String

Converts CSS property names from hyphen-case (kebab-case) to React camelCase. Supports vendor prefixes (leading hyphen) by capitalizing the first segment.

Parameters

  • name: CSS property name such as "background-color" or "-webkit-line-clamp".

Returns

String - React-style camelCase property.

inspect(css_prop_to_camel_case("background-color"), content="backgroundColor")
inspect(css_prop_to_camel_case("border-top-left-radius"), content="borderTopLeftRadius")
inspect(css_prop_to_camel_case("-webkit-line-clamp"), content="WebkitLineClamp")

declare_contained_style

source
#deprecated("This function is deprecated.")
#callsite(autofill(loc))
fn[U : Show] declare_contained_style(rules : Array[(String?, U, 
RespoStyle)], loc~ : SourceLoc) -> String

use contained_static_style instead

div

source
fn div(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

dom_attr_to_react_prop

source
fn dom_attr_to_react_prop(attr_name : String) -> String

Converts legacy DOM attribute names to React-compatible property names. This function provides backward compatibility for traditional HTML attribute names. Most attributes should use the correct React property names directly in element definitions.

Parameters

  • attr_name: HTML attribute name such as "class", "for", etc.

Returns

String - React-compatible property name.

inspect(dom_attr_to_react_prop("class"), content="className")
inspect(dom_attr_to_react_prop("for"), content="htmlFor")
inspect(dom_attr_to_react_prop("id"), content="id")
inspect(dom_attr_to_react_prop("data-test"), content="data-test")

dom_event_to_react_handler

source
fn dom_event_to_react_handler(event_type : DOMEventType) -> String

Converts DOM event types to React-compatible event handler names. Ensures proper camelCase formatting for React event handlers.

Parameters

  • event_type: DOM event type enum value.

Returns

String - React-compatible event handler name with "on" prefix.
inspect(dom_event_to_react_handler(KeyDown), content="onKeyDown")
inspect(dom_event_to_react_handler(Click), content="onClick")
inspect(dom_event_to_react_handler(MouseEnter), content="onMouseEnter")
inspect(dom_event_to_react_handler(DoubleClick), content="onDoubleClick")
fn footer(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a footer element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a footer element.

fn h1(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h1 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h1 element.

fn h2(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h2 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h2 element.

fn h3(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h3 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h3 element.

fn h4(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h4 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h4 element.

fn h5(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h5 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h5 element.

fn h6(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an h6 element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an h6 element.

fn header(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a header element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a header element.

img

source
fn img(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, src? : String, alt? : String, width? : String, height? : String, on_click? : (DOMEvent) -> Unit, on_load? : (DOMEvent) -> Unit, on_error? : (DOMEvent) -> Unit) -> VirtualNode

Creates an img element with the specified attributes, event handlers, and image properties.

Returns a virtual DOM node representing an img element.

input

source
fn input(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, type_? : InputType, value? : String, placeholder? : String, disabled? : Bool, on_click? : (DOMEvent) -> Unit, on_change? : (DOMEvent) -> Unit, on_input? : (DOMEvent) -> Unit) -> VirtualNode

Creates an input element with the specified attributes, event handlers, and properties.

Returns a virtual DOM node representing an input element.

is_boolean_prop

source
fn is_boolean_prop(prop_name : String) -> Bool

Checks if a React property should be treated as a boolean attribute. Returns true for attributes that React expects as boolean values.

Parameters

  • prop_name: React property name (already converted from DOM attribute).

Returns

Bool - true if the property should be treated as boolean.

inspect(is_boolean_prop("checked"), content="true")
inspect(is_boolean_prop("disabled"), content="true")
inspect(is_boolean_prop("readOnly"), content="true")
inspect(is_boolean_prop("className"), content="false")

label

source
fn label(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit, for_? : String) -> VirtualNode

Creates a label element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a label element.

fn li(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a li (list item) element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a li element.

fn nav(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a nav element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a nav element.

obscure

source
fn[T] obscure(v : T) -> 
JsObscure

a short hand to turn value into JsObscure in hook deps
fn ol(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates an ol (ordered list) element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing an ol element.

option

source
fn option(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, value? : String, selected? : Bool, disabled? : Bool) -> VirtualNode

Creates an option element with the specified attributes and properties.

Returns a virtual DOM node representing an option element.

fn p(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a p element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a p element.

render

source
fn render(vdom : VirtualNode, parent : 
Element) -> Unit

Renders a virtual DOM node to the specified parent element.

This function takes a virtual DOM node and a parent DOM element, then uses the React rendering engine to render the virtual node as a real DOM element within the parent.

Parameters

  • vdom: The virtual DOM node to render.
  • parent: The parent DOM element where the rendered node will be appended.

Example

// Render a virtual element to the document body
let custom_elem = create_element(
  "my-custom-element",
  ElementAttrs::new(),
  ElementEvents::new(),
  style=@css.respo_style(),
  [Text("Custom content")]
)
render(custom_elem.to_node(), document.body)

section

source
fn section(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a section element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a section element.

select

source
fn select(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], value? : String, disabled? : Bool, multiple? : Bool, on_change? : (DOMEvent) -> Unit) -> VirtualNode

Creates a select element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a select element.

span

source
fn span(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a span element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a span element.

Example:

let _ = span(
  class_name="text-bold",
  on_click=fn(_e) { println("Clicked!") }, []
)

static_style

source
#callsite(autofill(loc))
fn[U : Show] static_style(rules : Array[(U, 
RespoStyle)], loc~ : SourceLoc) -> String

Declare a static style in the head of the documentm for example
let style_demo : String = static_style(
 [("&", respo_style(margin=4 |> Px, background_color=Hsl(200, 90, 96)))],
)

textarea

source
fn textarea(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, value? : String, placeholder? : String, rows? : Int, cols? : Int, disabled? : Bool, on_change? : (DOMEvent) -> Unit, on_input? : (DOMEvent) -> Unit) -> VirtualNode

Creates a textarea element with the specified attributes, event handlers, and properties.

Returns a virtual DOM node representing a textarea element.

fn ul(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], innerHTML? : String, on_click? : (DOMEvent) -> Unit) -> VirtualNode

Creates a ul (unordered list) element with the specified attributes, event handlers, and children.

Returns a virtual DOM node representing a ul element.

use_callback0_deps

source
fn use_callback0_deps(f : () -> Unit, deps : Array[
JsObscure]) -> (() -> Unit)

use_callback_deps

source
fn[F] use_callback_deps(callback : F, deps : Array[
JsObscure]) -> F

use_effect_deps

source
fn use_effect_deps(effect : () -> Unit, deps : Array[
JsObscure]) -> Unit

use_effect_once

source
fn use_effect_once(effect : () -> Unit) -> Unit

use_layout_effect_deps

source
fn use_layout_effect_deps(effect : () -> Unit, deps : Array[
JsObscure]) -> Unit

use_memo_deps

source
fn[A] use_memo_deps(factory : () -> A, deps : Array[
JsObscure]) -> A

use_reducer

source
fn[S : Default, A] use_reducer(initial? : S, reducer : (S, A) -> S) -> (S, (A) -> Unit)

use_ref

source
fn[T] use_ref(initial : T) -> ReactRef[T]

use_state

source
fn[T] use_state(initial : T) -> (T, (T) -> Unit)

video

source
fn video(id? : String, class_name? : String, class_list? : Array[String], attrs? : ElementAttrs, event? : ElementEvents, style? : 
RespoStyle, children : Array[VirtualNode], src? : String, controls? : Bool, autoplay? : Bool, loop_enabled? : Bool, muted? : Bool, width? : String, height? : String, on_click? : (DOMEvent) -> Unit, on_play? : (DOMEvent) -> Unit, on_pause? : (DOMEvent) -> Unit) -> VirtualNode

Creates a video element with the specified attributes, event handlers, and video properties.

Returns a virtual DOM node representing a video element.

Source Files

Powered by MoonBit

Site sourceReport issuePackagesBuild queueSkillsStatistics

© 2026 mooncakes.io