wip: example

examples/README.md

@@ -3,3 +3,27 @@
 Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be built with the Dioxus CLI to preview features that only a native bundle can handle.
 
 List of examples:
+
+| Example                                 | What it does |
+| --------------------------------------- | ------------ |
+| [The basics](./basics.rs)               | this does    |
+| [fine grained reactivity](./signals.rs) | this does    |
+| Global State Management                 | this does    |
+| Virtual Refs                            | this does    |
+| Inline Styles                           | this does    |
+| Conditional Rendering                   | this does    |
+| Maps/Iterators                          | this does    |
+| Render To string                        | this does    |
+| Component Children                      | this does    |
+| Function Driven children                | this does    |
+| Memoization                             | this does    |
+| Borrowed Data                           | this does    |
+| Fragments                               | this does    |
+| Null/None Components                    | this does    |
+| Spread Pattern for props                | this does    |
+| Controlled Inputs                       | this does    |
+| Custom Elements                         | this does    |
+| Testing And debugging                   | this does    |
+| Asynchronous Data                       | this does    |
+| Fiber/Scheduled Rendering               | this does    |
+| CSS Compiled Styles                     | this does    |

examples/showcase.rs

@@ -0,0 +1,26 @@
+//! A Showcase of all the useful examples
+//!
+//!
+//!
+
+fn main() {
+    use_css_consumer(&cx, "mystyle");
+
+    // at the global head of the app
+    use_css_provider(&cx, |cfg| {});
+    use_recoil_provider(&cx, |cfg| {});
+
+    let recoil = use_recoil_api(&cx, |_| {});
+    use_websocket_connection(&cx, move |cfg| {
+        cfg.on_receive(move |event| match event.data::<Msg>() {
+            Ok(msg) => match msg {
+                a => recoil.set(&ATOM, 10),
+                c => recoil.set(&ATOM, 20),
+                _ => {}
+            },
+            Err(e) => {}
+        });
+        cfg.on_close(move |event| {});
+        cfg.on_open(move |event| {});
+    });
+}

packages/web/examples/anim.rs

@@ -29,7 +29,7 @@ fn main() {
     })
 }
 
-// use signals to directly update values outside of the diffing phase
+// Animations with signals
 fn signal_based(cx: ()) {
     const InitPos: (i32, i32) = (0, 0);
     const EndPos: (i32, i32) = (100, 200);
@@ -38,16 +38,12 @@ fn signal_based(cx: ()) {
 
     cx.render(rsx! {
         div {
-            style {
+            style: [
                 width: spring.0,
-                width: spring.1
+                height: spring.1
-            }
+            ]
-            button { "Reset"
+            button { onclick: move |_| spring.set(InitPos), "Reset" }
-                onclick: move |_| spring.set(InitPos)
+            button { onclick: move |_| spring.set(EndPos), "Animate" }
-            }
-            button { "Animate"
-                onclick: move |_| spring.set(EndPos)
-            }
         }
     })
 }