dioxus-mirror/examples

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