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! { +///
+ { " Hovered: " } + { hovered } +
++ { "Try to hover your cursor over this element." } +
+