From 8de3362799133aad278087d26d54178b23a01cd9 Mon Sep 17 00:00:00 2001
From: GGORG <GGORG0@protonmail.com>
Date: Mon, 2 Dec 2024 22:47:51 +0100
Subject: [PATCH] Added use_hovered hook

---
 README.md                                     |  1 +
 crates/yew-hooks/src/hooks/mod.rs             |  2 +
 crates/yew-hooks/src/hooks/use_hovered.rs     | 47 +++++++++++++++++++
 examples/yew-app/src/app/home.rs              |  1 +
 examples/yew-app/src/app/hooks/mod.rs         |  2 +
 examples/yew-app/src/app/hooks/use_hovered.rs | 25 ++++++++++
 examples/yew-app/src/app/mod.rs               |  3 ++
 7 files changed, 81 insertions(+)
 create mode 100644 crates/yew-hooks/src/hooks/use_hovered.rs
 create mode 100644 examples/yew-app/src/app/hooks/use_hovered.rs

diff --git a/README.md b/README.md
index e8857d2..02dfa99 100644
--- a/README.md
+++ b/README.md
@@ -135,6 +135,7 @@ fn counter() -> Html {
 - `use_geolocation` - tracks user's geographic location.
 - `use_swipe` - detects swipe based on TouchEvent.
 - `use_visible` - checks if an element is visible.
+- `use_hovered` - checks if an element is hovered.
 
 ### UI
 
diff --git a/crates/yew-hooks/src/hooks/mod.rs b/crates/yew-hooks/src/hooks/mod.rs
index 4c62fa0..944507b 100644
--- a/crates/yew-hooks/src/hooks/mod.rs
+++ b/crates/yew-hooks/src/hooks/mod.rs
@@ -15,6 +15,7 @@ mod use_event;
 mod use_favicon;
 mod use_geolocation;
 mod use_hash;
+mod use_hovered;
 mod use_infinite_scroll;
 mod use_interval;
 mod use_is_first_mount;
@@ -71,6 +72,7 @@ pub use use_event::*;
 pub use use_favicon::*;
 pub use use_geolocation::*;
 pub use use_hash::*;
+pub use use_hovered::*;
 pub use use_infinite_scroll::*;
 pub use use_interval::*;
 pub use use_is_first_mount::*;
diff --git a/crates/yew-hooks/src/hooks/use_hovered.rs b/crates/yew-hooks/src/hooks/use_hovered.rs
new file mode 100644
index 0000000..f9357cf
--- /dev/null
+++ b/crates/yew-hooks/src/hooks/use_hovered.rs
@@ -0,0 +1,47 @@
+use yew::prelude::*;
+
+use super::use_event;
+
+/// A sensor hook that tracks whether HTML element is being hovered.
+///
+/// # Example
+///
+/// ```rust
+/// # use yew::prelude::*;
+/// #
+/// use yew_hooks::prelude::*;
+///
+/// #[function_component(UseHovered)]
+/// fn hovered() -> Html {
+///     let node = use_node_ref();
+///     let state = use_hovered(node.clone());
+///
+///     html! {
+///         <div ref={node}>
+///             <b>{ " Hovered: " }</b>
+///             { state }
+///         </div>
+///     }
+/// }
+/// ```
+#[hook]
+pub fn use_hovered(node: NodeRef) -> bool {
+    let state = use_state_eq(|| false);
+
+    {
+        let state = state.clone();
+        let node = node.clone();
+        use_event(node, "mouseover", move |_: Event| {
+            state.set(true);
+        });
+    }
+
+    {
+        let state = state.clone();
+        use_event(node, "mouseout", move |_: Event| {
+            state.set(false);
+        });
+    }
+
+    *state
+}
diff --git a/examples/yew-app/src/app/home.rs b/examples/yew-app/src/app/home.rs
index e90474f..f0f0db2 100644
--- a/examples/yew-app/src/app/home.rs
+++ b/examples/yew-app/src/app/home.rs
@@ -90,6 +90,7 @@ pub fn home() -> Html {
                         <li><Link<AppRoute> to={AppRoute::UseGeolocation} classes="text-emerald-800 underline" >{ "use_geolocation" }</Link<AppRoute>> { " - tracks user's geographic location." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseSwipe} classes="text-emerald-800 underline" >{ "use_swipe" }</Link<AppRoute>> { " - detects swipe based on TouchEvent." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseVisible} classes="text-emerald-800 underline" >{ "use_visible" }</Link<AppRoute>> { " - checks if an element is visible." }</li>
+                        <li><Link<AppRoute> to={AppRoute::UseHovered} classes="text-emerald-800 underline" >{ "use_hovered" }</Link<AppRoute>> { " - checks if an element is being hovered." }</li>
                     </ul>
 
                     <h2 class="text-2xl font-bold">{ "UI" }</h2>
diff --git a/examples/yew-app/src/app/hooks/mod.rs b/examples/yew-app/src/app/hooks/mod.rs
index 4201893..cedcd3d 100644
--- a/examples/yew-app/src/app/hooks/mod.rs
+++ b/examples/yew-app/src/app/hooks/mod.rs
@@ -16,6 +16,7 @@ mod use_event;
 mod use_favicon;
 mod use_geolocation;
 mod use_hash;
+mod use_hovered;
 mod use_infinite_scroll;
 mod use_interval;
 mod use_is_first_mount;
@@ -74,6 +75,7 @@ pub use use_event::*;
 pub use use_favicon::*;
 pub use use_geolocation::*;
 pub use use_hash::*;
+pub use use_hovered::*;
 pub use use_infinite_scroll::*;
 pub use use_interval::*;
 pub use use_is_first_mount::*;
diff --git a/examples/yew-app/src/app/hooks/use_hovered.rs b/examples/yew-app/src/app/hooks/use_hovered.rs
new file mode 100644
index 0000000..bf627a8
--- /dev/null
+++ b/examples/yew-app/src/app/hooks/use_hovered.rs
@@ -0,0 +1,25 @@
+use yew::prelude::*;
+use yew_hooks::prelude::*;
+
+/// `use_hovered` demo
+#[function_component]
+pub fn UseHovered() -> Html {
+    let node = use_node_ref();
+    let hovered = use_hovered(node.clone());
+
+    html! {
+        <div class="container">
+            <header class="mt-24 text-xl text-center">
+                <div ref={node} class="bg-emerald-800 w-[400px] h-[200px] mx-auto text-slate-100 p-4">
+                    <p>
+                        <b>{ " Hovered: " }</b>
+                        { hovered }
+                    </p>
+                    <p>
+                        { "Try to hover your cursor over this element." }
+                    </p>
+                </div>
+            </header>
+        </div>
+    }
+}
diff --git a/examples/yew-app/src/app/mod.rs b/examples/yew-app/src/app/mod.rs
index a21f97c..dde99fa 100644
--- a/examples/yew-app/src/app/mod.rs
+++ b/examples/yew-app/src/app/mod.rs
@@ -129,6 +129,8 @@ pub enum AppRoute {
     UseInfiniteScroll,
     #[at("/use_visible")]
     UseVisible,
+    #[at("/use_hovered")]
+    UseHovered,
     #[not_found]
     #[at("/page-not-found")]
     PageNotFound,
@@ -198,6 +200,7 @@ pub fn switch(routes: AppRoute) -> Html {
         AppRoute::UseClipboard => html! { <UseClipboard /> },
         AppRoute::UseInfiniteScroll => html! { <UseInfiniteScroll /> },
         AppRoute::UseVisible => html! { <UseVisible /> },
+        AppRoute::UseHovered => html! { <UseHovered /> },
         AppRoute::PageNotFound => html! { <Home /> },
     }
 }