add the example to the list

This commit is contained in:
Ilya Maximov committed 2022-03-21 21:57:51 +01:00
1 parent 6e8fdc1e4d
commit f4b58c9bb6
1 file changed
+9 -8
+9 -8
View File
@@ -41,6 +41,7 @@ These examples are not necessarily meant to be run, but rather serve as a refere
| [Anti-patterns](./antipatterns.rs) | A collection of discouraged patterns | ✅ | | [Anti-patterns](./antipatterns.rs) | A collection of discouraged patterns | ✅ |
| [Complete rsx reference](./rsx_usage.rs) | A complete reference for all rsx! usage | ✅ | | [Complete rsx reference](./rsx_usage.rs) | A complete reference for all rsx! usage | ✅ |
| [Event Listeners](./listener.rs) | Attach closures to events on elements | ✅ | | [Event Listeners](./listener.rs) | Attach closures to events on elements | ✅ |
| [Eval](./eval.rs) | Evaluate dynamic JavaScript code | ✅ |
## Show me some examples! ## Show me some examples!
@@ -51,7 +52,7 @@ In our collection of examples, guides, and tutorials, we have:
- The reference (a collection of examples with heavy documentation) - The reference (a collection of examples with heavy documentation)
- The general examples - The general examples
- The platform-specific examples (web, ssr, desktop, mobile, server) - The platform-specific examples (web, ssr, desktop, mobile, server)
Here's what a few common tasks look like in Dioxus: Here's what a few common tasks look like in Dioxus:
Nested components with children and internal state: Nested components with children and internal state:
@@ -80,7 +81,7 @@ Controlled inputs:
```rust ```rust
fn App(cx: Scope) -> Element { fn App(cx: Scope) -> Element {
let value = use_state(&cx, String::new); let value = use_state(&cx, String::new);
cx.render(rsx!( cx.render(rsx!(
input { input {
"type": "text", "type": "text",
value: "{value}", value: "{value}",
@@ -96,16 +97,16 @@ fn App(cx: Scope) -> Element {
let list = (0..10).map(|i| { let list = (0..10).map(|i| {
rsx!(li { key: "{i}", "Value: {i}" }) rsx!(li { key: "{i}", "Value: {i}" })
}); });
let title = match list.len() { let title = match list.len() {
0 => rsx!("Not enough"), 0 => rsx!("Not enough"),
_ => rsx!("Plenty!"), _ => rsx!("Plenty!"),
}; };
if should_show { if should_show {
cx.render(rsx!( cx.render(rsx!(
title, title,
ul { list } ul { list }
)) ))
} else { } else {
None None
@@ -165,18 +166,18 @@ fn App(cx: Scope) -> Element {
Route::Home => rsx!( Home {} ), Route::Home => rsx!( Home {} ),
Route::Post(id) => rsx!( Post { id: id }) Route::Post(id) => rsx!( Post { id: id })
} }
})) }))
} }
``` ```
Suspense Suspense
```rust ```rust
fn App(cx: Scope) -> Element { fn App(cx: Scope) -> Element {
let doggo = use_suspense(cx, let doggo = use_suspense(cx,
|| async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() }, || async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() },
|response| cx.render(rsx!( img { src: "{response.message}" })) |response| cx.render(rsx!( img { src: "{response.message}" }))
); );
cx.render(rsx!{ cx.render(rsx!{
div { div {
"One doggo coming right up:", "One doggo coming right up:",