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 | ✅ |
These web-specific examples must be run with dioxus-cli
using dioxus develop --example XYZ
Example | What it does |
---|---|
asd | this does |
asd | this does |