docs/docs/references/a_rsx.md

title

title
RSX

This macro is the recommended way to describe a ui, it is a div that holds multiple elements

fn app() -> Element {
    rsx! {
        button { "click me" }
        text { "This is some text" }
    }
}

:::info rsx! is really just a div, so you can just do something like

rsx! {
    id: "root", class: "root",

    button { "click me" }
    text { "This is some text" }
}

Child values

If you want to add more children to values then just simply express it like a rsx!

fn app() -> Element {
    let x = 69;
    rsx! {
        div {
            text { "the number is {x}, Nice!" }
        }
    }
}

Formatted text

fn app() -> Element {
    let x = 69;
    rsx! {
        text { "the number is {x}, Nice!" }
    }
}

:::info You can also do expressions after the string

text { "the number is {}, Nice!", x }

For loops

fn app() -> Element {
    rsx! {
        for (i in 0..5) { // () are required
            text { "{i}" }
        }
    }
}

Attribute

You can change the element's struct fields by just providing some attributes before the children

fn app() -> Element {
    rsx! {
        text { class: "my_text" }
    }
}

Handler functions

Instead of closures which are tricky to work with on structs, We use Handler, It's basically a closure wrapped with a Arc<Mutex<T>>

fn app() -> Element {
    rsx! {
        button {
            on_click: fn(btn: &mut Button, event, document) {
                // do something
            }
        }
    }
}

Handler functions (with dependents)

If you have a State<T> and want to use it, you have to put a @ before the code block like this

fn app() -> Element {
    let count = State::new();

    rsx! {
        button {
            on_click: fn(btn: &mut Button, event, document) @count {
                let count = count.use_state(); // locks count so it can be used
            },
            "Current count: {count}"
        }
    }
}

:::info you can add multiple decedents by separating them via , like: @var1, var2, var3

Static text

If your text doesn't use variables that will change you can put static right before the text to signal that it's static.

fn app() -> Element {
    let count = 69; // count won't change since it's not mutable

    rsx! {
        text {
            static "Current count: {count}"
        }
    }
}