yew_hooks/hooks/
use_window_scroll.rs

1use gloo::utils::window;
2use yew::prelude::*;
3
4use super::{use_event_with_window, use_mount, use_raf_state};
5
6/// A sensor hook that tracks Window scroll position.
7///
8/// # Example
9///
10/// ```rust
11/// # use yew::prelude::*;
12/// #
13/// use yew_hooks::prelude::*;
14///
15/// #[function_component(UseWindowScroll)]
16/// fn window_scroll() -> Html {
17///     let state = use_window_scroll();
18///     
19///     html! {
20///         <>
21///             <b>{ " X: " }</b>
22///             { state.0 }
23///             <b>{ " Y: " }</b>
24///             { state.1 }
25///         </>
26///     }
27/// }
28/// ```
29#[hook]
30pub fn use_window_scroll() -> (f64, f64) {
31    let state = use_raf_state(|| {
32        (
33            window().page_x_offset().unwrap(),
34            window().page_y_offset().unwrap(),
35        )
36    });
37
38    {
39        let state = state.clone();
40        use_event_with_window("scroll", move |_: Event| {
41            state.set((
42                window().page_x_offset().unwrap(),
43                window().page_y_offset().unwrap(),
44            ));
45        });
46    }
47
48    {
49        let state = state.clone();
50        use_mount(move || {
51            state.set((
52                window().page_x_offset().unwrap(),
53                window().page_y_offset().unwrap(),
54            ));
55        });
56    }
57
58    *state
59}
yew_hooks/hooks/use_window_scroll.rs

yew_hooks/hooks/
use_window_scroll.rs
