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 | ✅ |
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 |