mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +00:00
8c7473d194
fix: `dog-app` breed change |
||
---|---|---|
.. | ||
assets | ||
core_reference | ||
borrowed.rs | ||
calculator.rs | ||
crm.rs | ||
disabled.rs | ||
dog_app.rs | ||
file_explorer.rs | ||
filedragdrop.rs | ||
framework_benchmark.rs | ||
hello_world.rs | ||
hydration.rs | ||
inputs.rs | ||
link.rs | ||
optional_props.rs | ||
pattern_model.rs | ||
pattern_reducer.rs | ||
README.md | ||
readme.rs | ||
router.rs | ||
rsx_compile_fail.rs | ||
rsx_usage.rs | ||
ssr.rs | ||
suspense.rs | ||
tailwind.rs | ||
tasks.rs | ||
todomvc.rs | ||
xss_safety.rs |
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 | A few basic examples to preview Dioxus | 🛠 |
fine grained reactivity | Escape diffing by writing values directly |
🛠 |
Global State Management | Share state between components | 🛠 |
Virtual Refs | Cross-platform imperative elements | 🛠 |
Inline Styles | Define styles for elements inline | 🛠 |
Conditional Rendering | 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 | A few basic examples to preview Dioxus | 🛠 |
fine grained reactivity | Escape diffing by writing values directly |
🛠 |
Global State Management | Share state between components | 🛠 |
Virtual Refs | Cross-platform imperative elements | 🛠 |
Inline Styles | Define styles for elements inline | 🛠 |
Conditional Rendering | Hide/Show elements using conditionals | ✅ |
Maps/Iterators | Use iterators in the rsx! macro | ✅ |
Render To string | Render a mounted virtualdom to a string | 🛠 |
Component Children | Pass children into child components | 🛠 |
Function Driven children | Pass functions to make VNodes | 🛠 |
Memoization & Borrowed Data | Suppress renders, borrow from parents | ✅ |
Fragments | Support root-less element groups | ✅ |
Null/None Components | Return nothing! | 🛠 |
Spread Pattern for props | Manually specify and override props | ✅ |
Controlled Inputs | 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 | A collection of discouraged patterns | ✅ |
Complete rsx reference | A complete reference for all rsx! usage | ✅ |
Event Listeners | 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:
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:
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:
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:
static App: Component = |cx| rsx!(cx, div {"hello world!"});
Borrowed prop contents:
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
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)
#[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
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
}
})
}