From 24c12cb1d13a50d96032bf9466660dc133cab801 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Mon, 3 Jul 2023 16:10:58 +0100
Subject: [PATCH] fixed examples

---
 .github/workflows/book.yml                          |  1 +
 docs/book/post_build.py                             |  5 ++++-
 examples/on_click_outside/Cargo.toml                |  2 +-
 examples/on_click_outside/src/main.rs               |  3 ++-
 examples/use_abs/Cargo.toml                         |  2 +-
 examples/use_active_element/Cargo.toml              |  2 +-
 examples/use_breakpoints/Cargo.toml                 |  2 +-
 examples/use_ceil/Cargo.toml                        |  2 +-
 examples/use_color_mode/Cargo.toml                  |  2 +-
 examples/use_css_var/Cargo.toml                     |  2 +-
 examples/use_css_var/src/main.rs                    |  5 +++--
 examples/use_cycle_list/Cargo.toml                  |  2 +-
 examples/use_debounce_fn/Cargo.toml                 |  2 +-
 examples/use_element_hover/Cargo.toml               |  2 +-
 examples/use_element_hover/src/main.rs              |  3 ++-
 examples/use_element_size/Cargo.toml                |  2 +-
 examples/use_element_size/src/main.rs               |  3 ++-
 examples/use_element_visibility/Cargo.toml          |  2 +-
 examples/use_element_visibility/src/main.rs         |  3 ++-
 examples/use_event_listener/Cargo.toml              |  2 +-
 examples/use_event_listener/src/main.rs             |  3 ++-
 examples/use_favicon/Cargo.toml                     |  2 +-
 examples/use_floor/Cargo.toml                       |  2 +-
 examples/use_intersection_observer/Cargo.toml       |  2 +-
 examples/use_intersection_observer/src/main.rs      |  5 +++--
 examples/use_interval/Cargo.toml                    |  2 +-
 examples/use_interval_fn/Cargo.toml                 |  2 +-
 examples/use_media_query/Cargo.toml                 |  2 +-
 examples/use_mouse/Cargo.toml                       |  2 +-
 examples/use_mouse/src/main.rs                      |  3 ++-
 examples/use_mutation_observer/Cargo.toml           |  2 +-
 examples/use_mutation_observer/src/main.rs          |  3 ++-
 examples/use_resize_observer/Cargo.toml             |  2 +-
 examples/use_resize_observer/src/main.rs            |  3 ++-
 examples/use_round/Cargo.toml                       |  2 +-
 examples/use_scroll/Cargo.toml                      |  2 +-
 examples/use_scroll/src/main.rs                     |  3 ++-
 examples/use_storage/Cargo.toml                     |  2 +-
 examples/use_throttle_fn/Cargo.toml                 |  2 +-
 examples/watch_debounced/Cargo.toml                 |  2 +-
 examples/watch_pausable/Cargo.toml                  |  2 +-
 examples/watch_pausable/src/main.rs                 | 13 +++++++++----
 examples/watch_throttled/Cargo.toml                 |  2 +-
 .../{{ function_name }}/Cargo.ffizer.hbs.toml       |  2 +-
 44 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/.github/workflows/book.yml b/.github/workflows/book.yml
index 5e950ac..35ca411 100644
--- a/.github/workflows/book.yml
+++ b/.github/workflows/book.yml
@@ -1,4 +1,5 @@
 on:
+  pull_request:
   workflow_dispatch:
 
 name: Book
diff --git a/docs/book/post_build.py b/docs/book/post_build.py
index 9383748..4185033 100644
--- a/docs/book/post_build.py
+++ b/docs/book/post_build.py
@@ -20,7 +20,10 @@ def build_and_copy_demo(category, md_name):
     example_dir = f"../../examples/{name}"
     if os.path.exists(example_dir):
         p = subprocess.Popen(["trunk", "build", "--release"], cwd=example_dir)
-        p.wait()
+        code = p.wait()
+
+        if code != 0:
+            sys.exit(code, f"failed to build example '{name}'")
 
         example_output_path = os.path.join(example_dir, "dist")
         target_path = os.path.join("book", category, name, "demo")
diff --git a/examples/on_click_outside/Cargo.toml b/examples/on_click_outside/Cargo.toml
index 50f8be9..6a27995 100644
--- a/examples/on_click_outside/Cargo.toml
+++ b/examples/on_click_outside/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/on_click_outside/src/main.rs b/examples/on_click_outside/src/main.rs
index 60a42e2..93ee27a 100644
--- a/examples/on_click_outside/src/main.rs
+++ b/examples/on_click_outside/src/main.rs
@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::on_click_outside;
@@ -5,7 +6,7 @@ use leptos_use::on_click_outside;
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
     let (show_modal, set_show_modal) = create_signal(cx, false);
-    let modal_ref = create_node_ref(cx);
+    let modal_ref = create_node_ref::<Div>(cx);
 
     let _ = on_click_outside(cx, modal_ref, move |_| set_show_modal.set(false));
 
diff --git a/examples/use_abs/Cargo.toml b/examples/use_abs/Cargo.toml
index 99e7868..6c8b6a0 100644
--- a/examples/use_abs/Cargo.toml
+++ b/examples/use_abs/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_active_element/Cargo.toml b/examples/use_active_element/Cargo.toml
index 1df29eb..24f4c0b 100644
--- a/examples/use_active_element/Cargo.toml
+++ b/examples/use_active_element/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_breakpoints/Cargo.toml b/examples/use_breakpoints/Cargo.toml
index 7534ffe..fa998c7 100644
--- a/examples/use_breakpoints/Cargo.toml
+++ b/examples/use_breakpoints/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_ceil/Cargo.toml b/examples/use_ceil/Cargo.toml
index e3e00fa..bd4c13f 100644
--- a/examples/use_ceil/Cargo.toml
+++ b/examples/use_ceil/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_color_mode/Cargo.toml b/examples/use_color_mode/Cargo.toml
index 20d3188..82f1179 100644
--- a/examples/use_color_mode/Cargo.toml
+++ b/examples/use_color_mode/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_css_var/Cargo.toml b/examples/use_css_var/Cargo.toml
index 7b35061..946ae4a 100644
--- a/examples/use_css_var/Cargo.toml
+++ b/examples/use_css_var/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_css_var/src/main.rs b/examples/use_css_var/src/main.rs
index da9f5a7..07f0877 100644
--- a/examples/use_css_var/src/main.rs
+++ b/examples/use_css_var/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::{use_css_var_with_options, UseCssVarOptions};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (color, set_color) =
         use_css_var_with_options(cx, "--color", UseCssVarOptions::default().target(el));
     let switch_color = move |_| {
@@ -15,7 +16,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         }
     };
 
-    let elv = create_node_ref(cx);
+    let elv = create_node_ref::<Div>(cx);
     let (key, set_key) = create_signal(cx, "--color".to_string());
     let (color_val, _) = use_css_var_with_options(cx, key, UseCssVarOptions::default().target(elv));
     let change_var = move |_| {
diff --git a/examples/use_cycle_list/Cargo.toml b/examples/use_cycle_list/Cargo.toml
index 68975d4..e3b95b2 100644
--- a/examples/use_cycle_list/Cargo.toml
+++ b/examples/use_cycle_list/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_debounce_fn/Cargo.toml b/examples/use_debounce_fn/Cargo.toml
index c8a1076..f3ff6d2 100644
--- a/examples/use_debounce_fn/Cargo.toml
+++ b/examples/use_debounce_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_element_hover/Cargo.toml b/examples/use_element_hover/Cargo.toml
index 4e04f1c..cfa9443 100644
--- a/examples/use_element_hover/Cargo.toml
+++ b/examples/use_element_hover/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_element_hover/src/main.rs b/examples/use_element_hover/src/main.rs
index fe074b0..4304ea4 100644
--- a/examples/use_element_hover/src/main.rs
+++ b/examples/use_element_hover/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Button;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Button>(cx);
 
     let is_hovered = use_element_hover_with_options(
         cx,
diff --git a/examples/use_element_size/Cargo.toml b/examples/use_element_size/Cargo.toml
index 54a8fc4..8b1cc7a 100644
--- a/examples/use_element_size/Cargo.toml
+++ b/examples/use_element_size/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_element_size/src/main.rs b/examples/use_element_size/src/main.rs
index 14a18dc..0cd8b9e 100644
--- a/examples/use_element_size/src/main.rs
+++ b/examples/use_element_size/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Textarea;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{use_element_size, UseElementSizeReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Textarea>(cx);
 
     let UseElementSizeReturn { width, height } = use_element_size(cx, el);
 
diff --git a/examples/use_element_visibility/Cargo.toml b/examples/use_element_visibility/Cargo.toml
index 967314a..9b38d0d 100644
--- a/examples/use_element_visibility/Cargo.toml
+++ b/examples/use_element_visibility/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_element_visibility/src/main.rs b/examples/use_element_visibility/src/main.rs
index 2edb668..e9637d9 100644
--- a/examples/use_element_visibility/src/main.rs
+++ b/examples/use_element_visibility/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay, Note};
 use leptos_use::use_element_visibility;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
 
     let is_visible = use_element_visibility(cx, el);
 
diff --git a/examples/use_event_listener/Cargo.toml b/examples/use_event_listener/Cargo.toml
index f14de6b..4d45d97 100644
--- a/examples/use_event_listener/Cargo.toml
+++ b/examples/use_event_listener/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_event_listener/src/main.rs b/examples/use_event_listener/src/main.rs
index 8cadc1c..cc3a971 100644
--- a/examples/use_event_listener/src/main.rs
+++ b/examples/use_event_listener/src/main.rs
@@ -1,4 +1,5 @@
 use leptos::ev::{click, keydown};
+use leptos::html::A;
 use leptos::*;
 use leptos_use::use_event_listener;
 
@@ -8,7 +9,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         log!("window keydown: '{}'", evt.key());
     });
 
-    let element = create_node_ref(cx);
+    let element = create_node_ref::<A>(cx);
 
     let _ = use_event_listener(cx, element, click, |evt| {
         log!(
diff --git a/examples/use_favicon/Cargo.toml b/examples/use_favicon/Cargo.toml
index e92c413..14fc3a3 100644
--- a/examples/use_favicon/Cargo.toml
+++ b/examples/use_favicon/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_floor/Cargo.toml b/examples/use_floor/Cargo.toml
index 1d870c9..44aea64 100644
--- a/examples/use_floor/Cargo.toml
+++ b/examples/use_floor/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_intersection_observer/Cargo.toml b/examples/use_intersection_observer/Cargo.toml
index 47300a1..7ebddca 100644
--- a/examples/use_intersection_observer/Cargo.toml
+++ b/examples/use_intersection_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_intersection_observer/src/main.rs b/examples/use_intersection_observer/src/main.rs
index 9d93b5d..f053297 100644
--- a/examples/use_intersection_observer/src/main.rs
+++ b/examples/use_intersection_observer/src/main.rs
@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{
@@ -7,8 +8,8 @@ use leptos_use::{
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let root = create_node_ref(cx);
-    let target = create_node_ref(cx);
+    let root = create_node_ref::<Div>(cx);
+    let target = create_node_ref::<Div>(cx);
     let (is_visible, set_visible) = create_signal(cx, false);
 
     let UseIntersectionObserverReturn {
diff --git a/examples/use_interval/Cargo.toml b/examples/use_interval/Cargo.toml
index e9a9610..8e879aa 100644
--- a/examples/use_interval/Cargo.toml
+++ b/examples/use_interval/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_interval_fn/Cargo.toml b/examples/use_interval_fn/Cargo.toml
index 18604f3..047c454 100644
--- a/examples/use_interval_fn/Cargo.toml
+++ b/examples/use_interval_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_media_query/Cargo.toml b/examples/use_media_query/Cargo.toml
index 995a31f..511c838 100644
--- a/examples/use_media_query/Cargo.toml
+++ b/examples/use_media_query/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_mouse/Cargo.toml b/examples/use_mouse/Cargo.toml
index 10761dd..d90d93f 100644
--- a/examples/use_mouse/Cargo.toml
+++ b/examples/use_mouse/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_mouse/src/main.rs b/examples/use_mouse/src/main.rs
index 7a8d711..bc66717 100644
--- a/examples/use_mouse/src/main.rs
+++ b/examples/use_mouse/src/main.rs
@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{
@@ -22,7 +23,7 @@ impl UseMouseEventExtractor for Extractor {
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
 
     let mouse_default = use_mouse(cx);
 
diff --git a/examples/use_mutation_observer/Cargo.toml b/examples/use_mutation_observer/Cargo.toml
index ce1e372..6460ee3 100644
--- a/examples/use_mutation_observer/Cargo.toml
+++ b/examples/use_mutation_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_mutation_observer/src/main.rs b/examples/use_mutation_observer/src/main.rs
index 623175d..b09e74b 100644
--- a/examples/use_mutation_observer/src/main.rs
+++ b/examples/use_mutation_observer/src/main.rs
@@ -1,3 +1,4 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::demo_or_body;
 use leptos_use::use_mutation_observer_with_options;
@@ -5,7 +6,7 @@ use std::time::Duration;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (messages, set_messages) = create_signal(cx, vec![]);
     let (class_name, set_class_name) = create_signal(cx, String::new());
     let (style, set_style) = create_signal(cx, String::new());
diff --git a/examples/use_resize_observer/Cargo.toml b/examples/use_resize_observer/Cargo.toml
index 720ebb5..ef3b271 100644
--- a/examples/use_resize_observer/Cargo.toml
+++ b/examples/use_resize_observer/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_resize_observer/src/main.rs b/examples/use_resize_observer/src/main.rs
index 640bff6..abbd4c5 100644
--- a/examples/use_resize_observer/src/main.rs
+++ b/examples/use_resize_observer/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Textarea;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_resize_observer;
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Textarea>(cx);
     let (text, set_text) = create_signal(cx, "".to_string());
 
     use_resize_observer(cx, el, move |entries, _| {
diff --git a/examples/use_round/Cargo.toml b/examples/use_round/Cargo.toml
index bc58620..72f105c 100644
--- a/examples/use_round/Cargo.toml
+++ b/examples/use_round/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_scroll/Cargo.toml b/examples/use_scroll/Cargo.toml
index 5372f34..b425e2d 100644
--- a/examples/use_scroll/Cargo.toml
+++ b/examples/use_scroll/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_scroll/src/main.rs b/examples/use_scroll/src/main.rs
index bb14e1b..23e7ac6 100644
--- a/examples/use_scroll/src/main.rs
+++ b/examples/use_scroll/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Div;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, BooleanDisplay};
 use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseScrollReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let el = create_node_ref(cx);
+    let el = create_node_ref::<Div>(cx);
     let (smooth, set_smooth) = create_signal(cx, false);
     let behavior = Signal::derive(cx, move || {
         if smooth.get() {
diff --git a/examples/use_storage/Cargo.toml b/examples/use_storage/Cargo.toml
index 8ad350e..3dee334 100644
--- a/examples/use_storage/Cargo.toml
+++ b/examples/use_storage/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/use_throttle_fn/Cargo.toml b/examples/use_throttle_fn/Cargo.toml
index 6aba4d5..9b5d184 100644
--- a/examples/use_throttle_fn/Cargo.toml
+++ b/examples/use_throttle_fn/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/watch_debounced/Cargo.toml b/examples/watch_debounced/Cargo.toml
index cd351a0..10d51ea 100644
--- a/examples/watch_debounced/Cargo.toml
+++ b/examples/watch_debounced/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/watch_pausable/Cargo.toml b/examples/watch_pausable/Cargo.toml
index 59aa651..02ac718 100644
--- a/examples/watch_pausable/Cargo.toml
+++ b/examples/watch_pausable/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/examples/watch_pausable/src/main.rs b/examples/watch_pausable/src/main.rs
index eae9161..b7691b7 100644
--- a/examples/watch_pausable/src/main.rs
+++ b/examples/watch_pausable/src/main.rs
@@ -1,10 +1,11 @@
+use leptos::html::Input;
 use leptos::*;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::{watch_pausable, WatchPausableReturn};
 
 #[component]
 fn Demo(cx: Scope) -> impl IntoView {
-    let input = create_node_ref(cx);
+    let input = create_node_ref::<Input>(cx);
     let (log, set_log) = create_signal(cx, "".to_string());
     let (source, set_source) = create_signal(cx, "".to_string());
 
@@ -13,9 +14,13 @@ fn Demo(cx: Scope) -> impl IntoView {
         resume,
         is_active,
         ..
-    } = watch_pausable(cx, move || source.get(), move |v, _, _| {
-        set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
-    });
+    } = watch_pausable(
+        cx,
+        move || source.get(),
+        move |v, _, _| {
+            set_log.update(|log| *log = format!("{log}Changed to \"{v}\"\n"));
+        },
+    );
 
     let clear = move |_| set_log.set("".to_string());
 
diff --git a/examples/watch_throttled/Cargo.toml b/examples/watch_throttled/Cargo.toml
index 327ff24..aaeafeb 100644
--- a/examples/watch_throttled/Cargo.toml
+++ b/examples/watch_throttled/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly", "csr"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
diff --git a/template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml b/template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml
index 29b2ea2..248c227 100644
--- a/template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml	
+++ b/template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml	
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = "0.4"
+leptos = { version = "0.4", features = ["nightly"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"