dioxus/examples
2021-12-29 21:28:28 -05:00
..
assets wip: book documentation 2021-10-16 17:04:28 -04:00
core wip: polish some more things 2021-12-29 21:28:28 -05:00
core_reference fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
desktop wip: polish some more things 2021-12-29 21:28:28 -05:00
ssr fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
web fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
async.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
borrowed.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
calculator.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
coroutine.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
crm.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
file_explorer.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
framework_benchmark.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
hello_world.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
hydration.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
manual_edits.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
pattern_model.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
pattern_reducer.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
README.md wip: polish some more things 2021-12-29 21:28:28 -05:00
readme.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
router.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
rsx_usage.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
ssr.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
tailwind.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
tasks.rs wip: polish some more things 2021-12-29 21:28:28 -05:00
todomvc.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
weather_app.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
web_tick.rs fix: readme and examples syntax 2021-12-28 23:48:25 -05:00
webview_web.rs wip: polish some more things 2021-12-29 21:28:28 -05:00

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

Show me some examples!

In our collection of examples, guides, and tutorials, we have:

  • The book (an introductory course)
  • The guide (an in-depth analysis of everything in Dioxus)
  • The reference (a collection of examples with heavy documentation)
  • The general examples
  • The platform-specific examples (web, ssr, desktop, mobile, server)

Here's what a few common tasks look like in Dioxus:

Nested components with children and internal state:

fn App(cx: Scope) -> Element {
  cx.render(rsx!( Toggle { "Toggle me" } ))
}

#[derive(PartialEq, Props)]
struct ToggleProps { children: Element }

fn Toggle(cx: Scope<ToggleProps>) -> Element {
  let mut toggled = use_state(&cx, || false);
  cx.render(rsx!{
    div {
      {&cx.props.children}
      button { onclick: move |_| toggled.set(true),
        {toggled.and_then(|| "On").or_else(|| "Off")}
      }
    }
  })
}

Controlled inputs:

fn App(cx: Scope) -> Element {
  let value = use_state(&cx, String::new);
  cx.render(rsx!( 
    input {
      "type": "text",
      value: "{value}",
      oninput: move |evt| value.set(evt.value.clone())
    }
  ))
}

Lists and Conditional rendering:

fn App(cx: Scope) -> Element {
  let list = (0..10).map(|i| {
    rsx!(li { key: "{i}", "Value: {i}" })
  });
  
  let title = match list.len() {
    0 => rsx!("Not enough"),
    _ => rsx!("Plenty!"),
  };

  if should_show {
    cx.render(rsx!( 
      {title}
      ul { {list} } 
    ))
  } else {
    None
  }
}

Tiny components:

static App: Component = |cx, _| rsx!(cx, div {"hello world!"});

Borrowed prop contents:

fn App(cx: Scope) -> Element {
  let name = use_state(&cx, || String::from("example"));
  rsx!(cx, Child { title: name.as_str() })
}

#[derive(Props)]
struct ChildProps<'a> { title: &'a str }

fn Child(cx: Scope<ChildProps>) -> Element {
  rsx!(cx, "Hello {cx.props.title}")
}

Global State

struct GlobalState { name: String }

fn App(cx: Scope) -> Element {
  use_provide_shared_state(cx, || GlobalState { name: String::from("Toby") })
  rsx!(cx, Leaf {})
}

fn Leaf(cx: Scope) -> Element {
  let state = use_consume_shared_state::<GlobalState>(cx)?;
  rsx!(cx, "Hello {state.name}")
}

Router (inspired by Yew-Router)

#[derive(PartialEq, Clone,  Hash, Eq, Routable)]
enum Route {
  #[at("/")]
  Home,
  #[at("/post/{id}")]
  Post(id)
}

fn App(cx: Scope) -> Element {
  let route = use_router(cx, Route::parse);
  cx.render(rsx!(div {
    {match route {
      Route::Home => rsx!( Home {} ),
      Route::Post(id) => rsx!( Post { id: id })
    }}
  }))  
}

Suspense

fn App(cx: Scope) -> Element {
  let doggo = use_suspense(cx,
    || async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() },
    |response| cx.render(rsx!( img { src: "{response.message}" }))
  );
  
  cx.render(rsx!{
    div {
      "One doggo coming right up:"
      {doggo}
    }
  })
}