dioxus-mirror/docs/website/homepage/ex1.md

A Simple Component

#[derive(PartialEq, Properties)]
struct Props { name: &'static str }

static HelloMessage: FC<Props> = |ctx| {
    ctx.render(rsx!{
        div { "Hello {ctx.props.name}" }
    })
}

Any syntax you like

Choose from a close-to-html syntax or the standard rsx! syntax

static HelloMessage: FC<()> = |ctx| {
    ctx.render(html!{
        <div> Hello World! </div>
    })
}

A Stateful Component

Store state with hooks!

enum LightState {
    Green
    Yellow,
    Red,
}
static HelloMessage: FC<()> = |ctx| {
    let (color, set_color) = use_state(ctx, || LightState::Green);

    let title = match color {
        Green => "Green means go",
        Yellow => "Yellow means slow down",
        Red => "Red means stop",
    };

    ctx.render(rsx!{
        h1 {"{title}"}
        button { "tick"
            onclick: move |_| set_color(match color {
                Green => Yellow,
                Yellow => Red,
                Red => Green,
            })
        }
    })
}