docs: an example for inlineprops

This commit is contained in:
Ilya Maximov 2022-03-20 20:59:50 +01:00
parent 46b7f3b623
commit ff459f7297
No known key found for this signature in database
GPG key ID: 1ACCDCC0429C9737
2 changed files with 50 additions and 8 deletions

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 | ✅ |
| [Complete rsx reference](./rsx_usage.rs) | A complete reference for all rsx! usage | ✅ |
| [Event Listeners](./listener.rs) | Attach closures to events on elements | ✅ |
| [Inline Props](./inlineprops.rs) | Using the `#[inling_props]` macro | ✅ |
## 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 general examples
- The platform-specific examples (web, ssr, desktop, mobile, server)
Here's what a few common tasks look like in Dioxus:
Nested components with children and internal state:
@ -80,7 +81,7 @@ Controlled inputs:
```rust
fn App(cx: Scope) -> Element {
let value = use_state(&cx, String::new);
cx.render(rsx!(
cx.render(rsx!(
input {
"type": "text",
value: "{value}",
@ -96,16 +97,16 @@ fn App(cx: Scope) -> Element {
let list = (0..10).map(|i| {
rsx!(li { key: "{i}", "Value: {i}" })
});
let title = match list.len() {
0 => rsx!("Not enough"),
_ => rsx!("Plenty!"),
};
if should_show {
cx.render(rsx!(
cx.render(rsx!(
title,
ul { list }
ul { list }
))
} else {
None
@ -165,18 +166,18 @@ fn App(cx: Scope) -> Element {
Route::Home => rsx!( Home {} ),
Route::Post(id) => rsx!( Post { id: id })
}
}))
}))
}
```
Suspense
Suspense
```rust
fn App(cx: Scope) -> Element {
let doggo = use_suspense(cx,
|| async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() },
|response| cx.render(rsx!( img { src: "{response.message}" }))
);
cx.render(rsx!{
div {
"One doggo coming right up:",

41
examples/inlineprops.rs Normal file
View file

@ -0,0 +1,41 @@
//! Run with `cargo-expand` to see what each one expands to
#![allow(non_snake_case)]
use dioxus::prelude::*;
#[inline_props]
fn Thing1<T>(cx: Scope, _a: T) -> Element {
cx.render(rsx! { "" })
}
#[inline_props]
fn Thing2(cx: Scope, _a: u32) -> Element<'a> {
cx.render(rsx! { "" })
}
#[inline_props]
fn Thing3<'a, T>(cx: Scope<'a>, _a: &'a T) -> Element<'a> {
cx.render(rsx! { "" })
}
#[inline_props]
fn Thing4<'a>(cx: Scope<'a>, _a: &'a u32) -> Element<'a> {
cx.render(rsx! { "" })
}
fn main() {
dioxus::desktop::launch(app);
}
fn app(cx: Scope) -> Element {
let state = use_state(&cx, || 1);
cx.render(rsx! {
div {
Thing1 { _a: 1 },
Thing2 { _a: 1 },
Thing3 { _a: state },
Thing4 { _a: state },
}
})
}