Update `counter` example

examples/counter/README.md

@@ -2,5 +2,4 @@
 
 This example creates a simple counter in a client side rendered app with Rust and WASM!
 
-
 To run it, just issue the `trunk serve --open` command in the example root. This will build the app, run it, and open a new browser to serve it.

examples/counter/src/lib.rs

@@ -1,14 +1,24 @@
 use leptos::*;
 
-pub fn simple_counter(cx: Scope) -> HtmlElement<Div> {
-    let (value, set_value) = create_signal(cx, 0);
+/// A simple counter component.
+/// 
+/// You can use doc comments like this to document your component.
+#[component]
+pub fn SimpleCounter(
+    cx: Scope,
+    /// The starting value for the counter
+    initial_value: i32,
+    /// The change that should be applied each time the button is clicked.
+    step: i32
+) -> impl IntoView {
+    let (value, set_value) = create_signal(cx, initial_value);
 
     view! { cx,
         <div>
             <button on:click=move |_| set_value(0)>"Clear"</button>
-            <button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
+            <button on:click=move |_| set_value.update(|value| *value -= step)>"-1"</button>
             <span>"Value: " {move || value().to_string()} "!"</span>
-            <button on:click=move |_| set_value.update(|value| *value += 1)>"+1"</button>
+            <button on:click=move |_| set_value.update(|value| *value += step)>"+1"</button>
         </div>
     }
 }

examples/counter/src/main.rs

@@ -1,8 +1,13 @@
-use counter::simple_counter;
+use counter::*;
 use leptos::*;
 
 pub fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-    mount_to_body(simple_counter)
+    mount_to_body(|cx| view! { cx,
+        <SimpleCounter
+            initial_value=0
+            step=1
+        />
+    })
 }