dioxus/examples
Leonard c866ae602b
Add system for creating component attributes + new #[component] attribute (#1448)
* Add `#[component]` attribute + system for creating component attributes + other stuff

* Delete inlineprops.rs

* Update inline_props.rs

* Cargo fmt

* Fix clippy warnings and paths in props/mods.rs

* Include where clause in `#[inline_props]` output

* Allow Clippy type complexity in `LinkProps`

* Allow the type complexity lint for the entire link.rs file

* Remove snake_case -> PascalCase converter, but rather enforce PascalCase

Also:
- Put the second function inside the main one instead of besides it.
- Simplify

* Simplify type check lints so they don't return false positives

They will not always work, but they won't return any false positives, like for aliases. This is likely going to be replaced by a more polished Clippy-backed linting system.

* Fix #583

* Cargo fmt

* Add docs for `deserialize()` and remove useless comment

* Add `#[component]` to prelude

* Merge branch 'master' of https://github.com/tigerros/dioxus

* #[inline_props] is no more. Except in the docs folder, but that's going to be removed

* Remove docs folder

* Remove docs from workspace

* Resolve `DeserializerOutput` conversation
2023-09-15 09:13:36 -05:00
..
assets fix: Update logos and custom assets example (#960) 2023-04-15 08:02:04 -05:00
mobile_demo Add ScopeId::ROOT (#1398) 2023-08-25 08:31:23 -05:00
PWA-example fix: Add the --locked param to every cli installation command (#1427) 2023-09-04 07:28:38 -05:00
query_segments_demo Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
tailwind Update tailwind examples to work with multi-page apps (#1339) 2023-08-12 08:34:42 -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 restore clock example 2023-08-08 13:31:38 -07: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 Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05: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 Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
drops.rs make clippy happy 2023-01-15 10:12:22 -08:00
error_handle.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
eval.rs Convert use_eval to use send/recv system (#1080) 2023-07-21 17:36:25 -05:00
fermi.rs Fix the issue of duplicate unique ID for atoms using newtype. 2023-06-21 21:50:10 +08:00
file_explorer.rs fix clippy 2023-01-27 20:35:46 -06:00
file_upload.rs Changed directory to webkitdirectory in bool_attrs definitions. 2023-07-10 17:19:11 +08:00
filedragdrop.rs fix clippy 2023-01-27 20:35:46 -06:00
flat_router.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05: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 fix all broken examples (#1248) 2023-07-25 14:30:08 -05:00
inlineprops.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
inputs.rs added select element example 2023-04-23 17:15:06 +02:00
link.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
login_form.rs Fix the login form example 2023-08-08 15:45:09 -07: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 link component 2023-07-26 10:18:39 -07:00
README.md Update README.md 2023-06-30 13:31:59 +02:00
readme.rs fix: window zoom 2022-12-30 02:09:02 -05:00
router.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05: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 Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
scroll_to_top.rs add examples for onmounted 2023-03-24 11:32:42 -05:00
shared_state.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
shortcut.rs Fix merge errors 2023-06-30 12:48:25 -07:00
signals.rs fix memo and add tests 2023-08-07 14:31:03 -07:00
simple_desktop.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
simple_list.rs chore: make for loops not the same 2022-11-17 22:55:46 -08:00
simple_router.rs Add system for creating component attributes + new #[component] attribute (#1448) 2023-09-15 09:13:36 -05:00
ssr.rs fix clippy 2023-01-27 20:35:46 -06:00
suspense.rs fix all broken examples (#1248) 2023-07-25 14:30:08 -05: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 add to example 2023-07-04 14:48:05 +02: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