mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-12-18 08:33:07 +00:00
6c323e9fc5
* Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book
60 lines
1.5 KiB
Rust
60 lines
1.5 KiB
Rust
#![allow(non_snake_case, unused)]
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::desktop::launch(App);
|
|
}
|
|
|
|
#[derive(serde::Deserialize, Debug)]
|
|
struct ApiResponse {
|
|
#[serde(rename = "message")]
|
|
image_url: String,
|
|
}
|
|
|
|
fn App(cx: Scope) -> Element {
|
|
// ANCHOR: use_future
|
|
let future = use_future(&cx, (), |_| async move {
|
|
reqwest::get("https://dog.ceo/api/breeds/image/random")
|
|
.await
|
|
.unwrap()
|
|
.json::<ApiResponse>()
|
|
.await
|
|
});
|
|
// ANCHOR_END: use_future
|
|
|
|
// ANCHOR: render
|
|
cx.render(match future.value() {
|
|
Some(Ok(response)) => rsx! {
|
|
button {
|
|
onclick: move |_| future.restart(),
|
|
"Click to fetch another doggo"
|
|
}
|
|
div {
|
|
img {
|
|
max_width: "500px",
|
|
max_height: "500px",
|
|
src: "{response.image_url}",
|
|
}
|
|
}
|
|
},
|
|
Some(Err(_)) => rsx! { div { "Loading dogs failed" } },
|
|
None => rsx! { div { "Loading dogs..." } },
|
|
})
|
|
// ANCHOR_END: render
|
|
}
|
|
|
|
#[inline_props]
|
|
fn RandomDog(cx: Scope, breed: String) -> Element {
|
|
// ANCHOR: dependency
|
|
let future = use_future(&cx, (breed,), |(breed,)| async move {
|
|
reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
|
|
.await
|
|
.unwrap()
|
|
.json::<ApiResponse>()
|
|
.await
|
|
});
|
|
// ANCHOR_END: dependency
|
|
|
|
None
|
|
}
|