yew_hooks/hooks/
use_hovered.rs

1use yew::prelude::*;
2
3use super::use_event;
4
5/// A sensor hook that tracks whether HTML element is being hovered.
6///
7/// # Example
8///
9/// ```rust
10/// # use yew::prelude::*;
11/// #
12/// use yew_hooks::prelude::*;
13///
14/// #[function_component(UseHovered)]
15/// fn hovered() -> Html {
16///     let node = use_node_ref();
17///     let state = use_hovered(node.clone());
18///
19///     html! {
20///         <div ref={node}>
21///             <b>{ " Hovered: " }</b>
22///             { state }
23///         </div>
24///     }
25/// }
26/// ```
27#[hook]
28pub fn use_hovered(node: NodeRef) -> bool {
29    let state = use_state_eq(|| false);
30
31    {
32        let state = state.clone();
33        let node = node.clone();
34        use_event(node, "mouseover", move |_: Event| {
35            state.set(true);
36        });
37    }
38
39    {
40        let state = state.clone();
41        use_event(node, "mouseout", move |_: Event| {
42            state.set(false);
43        });
44    }
45
46    *state
47}
yew_hooks/hooks/use_hovered.rs

yew_hooks/hooks/
use_hovered.rs
