dioxus/examples
2023-05-31 17:16:27 -05:00
..
assets fix: Update logos and custom assets example (#960) 2023-04-15 08:02:04 -05:00
PWA-example examples: add PWA w/ Dioxus CLI template (#977) 2023-04-23 18:26:23 -05:00
tailwind create complete tailwind example project with steps to setup tailwind 2023-03-26 11:29:56 -05:00
all_css.rs chore: clean up interpreter and bindings 2022-12-05 16:47:04 -08:00
all_events.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
borrowed.rs chore: clean up interpreter and bindings 2022-12-05 16:47:04 -08:00
button.rs make clippy happy 2023-02-06 22:18:07 -08:00
calculator.rs fix clippy 2023-01-27 20:35:46 -06:00
callback.rs fix clippy 2023-01-27 20:35:46 -06:00
clock.rs fix clippy 2023-01-27 20:35:46 -06:00
compose.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
control_focus.rs Merge branch 'upstream' into query-system 2023-05-05 11:09:25 -05:00
counter.rs add counter example 2023-04-09 13:42:40 -07:00
crm.rs actually make clippy happy 2023-04-12 20:19:01 +02:00
custom_assets.rs fix: Update logos and custom assets example (#960) 2023-04-15 08:02:04 -05:00
custom_html.rs Less clumsy configuration for desktop and mobile (#553) 2022-09-13 16:22:27 -07:00
disabled.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
dog_app.rs fix clippy 2023-01-27 20:35:46 -06:00
drops.rs make clippy happy 2023-01-15 10:12:22 -08:00
error_handle.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
eval.rs fix eval example 2022-12-30 02:06:33 -05:00
fermi.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
file_explorer.rs fix clippy 2023-01-27 20:35:46 -06:00
file_upload.rs Merge branch 'master' into implement-file-engine 2023-04-26 15:32:34 -07:00
filedragdrop.rs fix clippy 2023-01-27 20:35:46 -06:00
flat_router.rs actually make clippy happy 2023-04-12 20:19:01 +02:00
form.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
framework_benchmark.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
generic_component.rs use the generic parameter in the generic component example 2023-04-23 11:54:40 -05:00
heavy_compute.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
hello_world.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
hydration.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
inlineprops.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
inputs.rs added select element example 2023-04-23 17:15:06 +02:00
link.rs actually make clippy happy 2023-04-12 20:19:01 +02:00
login_form.rs wip: pass more events 2022-11-15 16:37:23 -08:00
multiwindow.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
nested_listeners.rs Fix typo (#702) 2023-01-01 14:41:18 -06:00
optional_props.rs Renderers are now packages, not features. (#387) 2022-07-09 15:15:20 -04:00
overlay.rs chore: clean up some clippy warnings and add clippy lints to CI 2023-01-11 16:13:41 -08:00
pattern_model.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
pattern_reducer.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
read_size.rs fix clippy 2023-03-26 07:23:32 -05:00
README.md Remove tui_* examples from README 2023-01-20 16:31:26 +07:00
readme.rs fix: window zoom 2022-12-30 02:09:02 -05:00
router.rs actually make clippy happy 2023-04-12 20:19:01 +02:00
rsx_compile_fail.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
rsx_usage.rs fix clippy 2023-01-27 20:35:46 -06:00
scroll_to_top.rs add examples for onmounted 2023-03-24 11:32:42 -05:00
shortcut.rs create global shortcut handler for dioxus desktop 2023-03-01 13:23:15 -06:00
signals.rs feat: implement function accessor 2023-01-01 22:57:16 -05:00
simple_desktop.rs actually make clippy happy 2023-04-12 20:19:01 +02:00
simple_list.rs chore: make for loops not the same 2022-11-17 22:55:46 -08:00
ssr.rs fix clippy 2023-01-27 20:35:46 -06:00
suspense.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
svg.rs fix rng in svg dice example (#970) 2023-04-22 11:09:41 -05:00
svg_basic.rs fix: parsing of attributes without trailing commas 2022-12-12 11:18:36 -08:00
tasks.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00
textarea.rs fix clippy 2023-01-27 20:35:46 -06:00
todomvc.rs Add more features to todomvc (#928) 2023-04-02 20:03:33 -05:00
web_component.rs fix formatting 2023-03-19 20:47:16 -05:00
window_event.rs Fix typo (#702) 2023-01-01 14:41:18 -06:00
window_focus.rs change to hook api 2023-01-12 18:48:23 -06:00
window_zoom.rs chore: clean up zoom example 2022-12-30 02:32:53 -05:00
xss_safety.rs chore: rename all &cx to cx, make clipppy happy 2022-12-07 13:11:40 -08:00

Examples

These examples are fully-fledged mini Dioxus apps.

You can run them with cargo run --example EXAMPLE_NAME. Example:

cargo run --example hello_world

(Most of these examples are run through webview, so you don't need the Dioxus CLI installed)

Basic Features

hello_world - Most basic example

readme - Counter example from the Readme

custom_assets - Include images

custom_html - Customize wrapper HTML

eval - Evaluate JS expressions

RSX

rsx_usage - Demo of all RSX features

xss_safety - You can include text without worrying about injections by default

Props

borrowed - Borrowed props

inlineprops - Demo of inline_props macro

optional_props - Optional props

CSS

all_css - You can specify any CSS attribute

tailwind - You can use a library for styling

Input Handling

all_events - Basic event handling demo

filedragdrop - Handle dropped files

form - Handle form submission

inputs - Input values

nested_listeners - Nested handlers and bubbling

textarea - Text area input

State Management

fermi - Fermi library for state management

pattern_reducer - The reducer pattern with use_state

rsx_compile_fail

Async

login_form - Login endpoint example

suspense - Render placeholders while data is loading

tasks - Continuously run future

SVG

svg_basic

svg

Performance

framework_benchmark - Renders a huge list

Note: The benchmark should be run in release mode:

cargo run --example framework_benchmark --release

heavy_compute - How to deal with expensive operations

Server-side rendering

ssr - Rendering RSX server-side

hydration - Pre-rendering with hydration

Common Patterns

disabled - Disable buttons conditionally

error_handle - Handle errors with early return

Routing

flat_router - Basic, flat route example

router - Router example

link - Internal, external and custom links

Platform Features

window_event - Window decorations, fullscreen, minimization, etc.

window_zoom Zoom in or out

Example Apps

calculator - Simple calculator

pattern_model - Simple calculator, but using a custom struct as the model

crm - Toy multi-page customer management app

dog_app - Accesses dog API

file_explorer - File browser that uses use_ref to interact with the model

todomvc - Todo task list example

TODO

Missing Features

  • Fine-grained reactivity
  • Refs - imperative handles to elements
  • Function-driven children: Pass functions to make VNodes

Missing examples

  • Shared state
  • Root-less element groups
  • Spread props
  • Custom elements
  • Component Children: Pass children into child components
  • Render To string: Render a mounted virtualdom to a string
  • Testing and Debugging