Added use_hovered hook (#47)

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
 

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::*;

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
+}

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>

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::*;

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>
+    }
+}

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 /> },
     }
 }