mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-12-12 22:02:28 +00:00
187 lines
7.1 KiB
Markdown
187 lines
7.1 KiB
Markdown
# Examples
|
|
|
|
Most of these examples are run through webview so you don't need the Dioxus CLI installed to preview the functionality.
|
|
|
|
These examples are fully-fledged micro apps. They can be ran with the `cargo run --example XYZ`
|
|
|
|
| Example | What it does | Status |
|
|
| --------------------------------------------------- | ------------------------------------------- | ------ |
|
|
| [The basics](./basics.rs) | A few basic examples to preview Dioxus | 🛠 |
|
|
| [fine grained reactivity](./signals.rs) | Escape `diffing` by writing values directly | 🛠 |
|
|
| [Global State Management](./statemanagement.rs) | Share state between components | 🛠 |
|
|
| [Virtual Refs]() | Cross-platform imperative elements | 🛠 |
|
|
| [Inline Styles](./inline-styles.rs) | Define styles for elements inline | 🛠 |
|
|
| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals | ✅ |
|
|
|
|
These examples are not necessarily meant to be run, but rather serve as a reference for the given functionality.
|
|
|
|
| Example | What it does | Status |
|
|
| --------------------------------------------------- | ----------------------------------------------- | ------ |
|
|
| [The basics](./basics.rs) | A few basic examples to preview Dioxus | 🛠 |
|
|
| [fine grained reactivity](./signals.rs) | Escape `diffing` by writing values directly | 🛠 |
|
|
| [Global State Management](./statemanagement.rs) | Share state between components | 🛠 |
|
|
| [Virtual Refs]() | Cross-platform imperative elements | 🛠 |
|
|
| [Inline Styles](./inline-styles.rs) | Define styles for elements inline | 🛠 |
|
|
| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals | ✅ |
|
|
| [Maps/Iterators](./iterators.rs) | Use iterators in the rsx! macro | ✅ |
|
|
| [Render To string](./tostring.rs) | Render a mounted virtualdom to a string | 🛠 |
|
|
| [Component Children](./children.rs) | Pass children into child components | 🛠 |
|
|
| [Function Driven children]() | Pass functions to make VNodes | 🛠 |
|
|
| [Memoization & Borrowed Data](./memo.rs) | Suppress renders, borrow from parents | ✅ |
|
|
| [Fragments](./fragments.rs) | Support root-less element groups | ✅ |
|
|
| [Null/None Components](./empty.rs) | Return nothing! | 🛠 |
|
|
| [Spread Pattern for props](./spreadpattern.rs) | Manually specify and override props | ✅ |
|
|
| [Controlled Inputs](./controlled-inputs.rs) | this does | 🛠 |
|
|
| [Custom Elements]() | Define custom elements | 🛠 |
|
|
| [Web Components]() | Custom elements to interface with WebComponents | 🛠 |
|
|
| [Testing And debugging]() | this does | 🛠 |
|
|
| [Asynchronous Data]() | Using suspense to wait for data | 🛠 |
|
|
| [Fiber/Scheduled Rendering]() | this does | 🛠 |
|
|
| [CSS Compiled Styles]() | this does | 🛠 |
|
|
| [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 | ✅ |
|
|
|
|
|
|
## Show me some examples!
|
|
|
|
In our collection of examples, guides, and tutorials, we have:
|
|
- The book (an introductory course)
|
|
- The guide (an in-depth analysis of everything in Dioxus)
|
|
- 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:
|
|
```rust
|
|
fn App(cx: Scope) -> Element {
|
|
cx.render(rsx!( Toggle { "Toggle me" } ))
|
|
}
|
|
|
|
#[derive(PartialEq, Props)]
|
|
struct ToggleProps { children: Element }
|
|
|
|
fn Toggle(cx: Scope<ToggleProps>) -> Element {
|
|
let mut toggled = use_state(&cx, || false);
|
|
cx.render(rsx!{
|
|
div {
|
|
&cx.props.children
|
|
button { onclick: move |_| toggled.set(true),
|
|
toggled.and_then(|| "On").or_else(|| "Off")
|
|
}
|
|
}
|
|
})
|
|
}
|
|
```
|
|
|
|
Controlled inputs:
|
|
```rust
|
|
fn App(cx: Scope) -> Element {
|
|
let value = use_state(&cx, String::new);
|
|
cx.render(rsx!(
|
|
input {
|
|
"type": "text",
|
|
value: "{value}",
|
|
oninput: move |evt| value.set(evt.value.clone())
|
|
}
|
|
))
|
|
}
|
|
```
|
|
|
|
Lists and Conditional rendering:
|
|
```rust
|
|
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!(
|
|
title,
|
|
ul { list }
|
|
))
|
|
} else {
|
|
None
|
|
}
|
|
}
|
|
```
|
|
|
|
Tiny components:
|
|
```rust
|
|
static App: Component = |cx| rsx!(cx, div {"hello world!"});
|
|
```
|
|
|
|
Borrowed prop contents:
|
|
```rust
|
|
fn App(cx: Scope) -> Element {
|
|
let name = use_state(&cx, || String::from("example"));
|
|
rsx!(cx, Child { title: name.as_str() })
|
|
}
|
|
|
|
#[derive(Props)]
|
|
struct ChildProps<'a> { title: &'a str }
|
|
|
|
fn Child(cx: Scope<ChildProps>) -> Element {
|
|
rsx!(cx, "Hello {cx.props.title}")
|
|
}
|
|
```
|
|
|
|
Global State
|
|
```rust
|
|
struct GlobalState { name: String }
|
|
|
|
fn App(cx: Scope) -> Element {
|
|
use_provide_shared_state(cx, || GlobalState { name: String::from("Toby") })
|
|
rsx!(cx, Leaf {})
|
|
}
|
|
|
|
fn Leaf(cx: Scope) -> Element {
|
|
let state = use_consume_shared_state::<GlobalState>(cx)?;
|
|
rsx!(cx, "Hello {state.name}")
|
|
}
|
|
```
|
|
|
|
Router (inspired by Yew-Router)
|
|
```rust
|
|
#[derive(PartialEq, Clone, Hash, Eq, Routable)]
|
|
enum Route {
|
|
#[at("/")]
|
|
Home,
|
|
#[at("/post/{id}")]
|
|
Post(id)
|
|
}
|
|
|
|
fn App(cx: Scope) -> Element {
|
|
let route = use_router(cx, Route::parse);
|
|
cx.render(rsx!(div {
|
|
match route {
|
|
Route::Home => rsx!( Home {} ),
|
|
Route::Post(id) => rsx!( Post { id: id })
|
|
}
|
|
}))
|
|
}
|
|
```
|
|
|
|
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:",
|
|
doggo
|
|
}
|
|
})
|
|
}
|
|
```
|