yew_hooks/hooks/
use_scrolling.rs

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

yew_hooks/hooks/
use_scrolling.rs
