yew_hooks/hooks/
use_search_param.rs

1use gloo::utils::window;
2use web_sys::UrlSearchParams;
3use yew::prelude::*;
4
5use super::use_event_with_window;
6
7/// A sensor hook that tracks brower's location search param value.
8///
9/// # Example
10///
11/// ```rust
12/// # use yew::prelude::*;
13/// #
14/// use yew_hooks::prelude::*;
15///
16/// #[function_component(UseSearchParam)]
17/// fn search_param() -> Html {
18///     let param = use_search_param("foo".to_string());
19///    
20///     html! {
21///         <>
22///             <p>
23///                 <b>{ " Current search param: " }</b>
24///                 { param.unwrap_or_default() }
25///             </p>
26///         </>
27///     }
28/// }
29/// ```
30#[hook]
31pub fn use_search_param(param: String) -> Option<String> {
32    let state = use_state(|| get_param(param.clone()));
33
34    {
35        let state = state.clone();
36        let param = param.clone();
37        use_event_with_window("popstate", move |_: Event| {
38            let param = param.clone();
39            state.set(get_param(param));
40        });
41    }
42
43    {
44        let state = state.clone();
45        let param = param.clone();
46        use_event_with_window("pushstate", move |_: Event| {
47            let param = param.clone();
48            state.set(get_param(param));
49        });
50    }
51
52    {
53        let state = state.clone();
54        use_event_with_window("replacestate", move |_: Event| {
55            let param = param.clone();
56            state.set(get_param(param));
57        });
58    }
59
60    (*state).clone()
61}
62
63fn get_param(param: String) -> Option<String> {
64    let search = window().location().search().unwrap_or_default();
65    UrlSearchParams::new_with_str(search.as_str()).map_or(None, |params| params.get(param.as_str()))
66}
yew_hooks/hooks/use_search_param.rs

yew_hooks/hooks/
use_search_param.rs
