Function dioxus::prelude::use_drop

source ·
pub fn use_drop<D>(destroy: D)
where D: FnOnce() + 'static,
Expand description

Creates a callback that will be run before the component is removed. This can be used to clean up side effects from the component (created with use_effect).

Example:

use dioxus::prelude::*;

fn app() -> Element {
    let state = use_signal(|| true);
    rsx! {
        for _ in 0..100 {
            h1 {
                "spacer"
            }
        }
        if **state {
            rsx! {
                child_component {}
            }
        }
        button {
            onclick: move |_| {
                state.set(!*state.get());
            },
            "Unmount element"
        }
    }
}

fn child_component() -> Element {
    let original_scroll_position = use_signal(|| 0.0);

    use_effect(move |_| async move {
        let window = web_sys::window().unwrap();
        let document = window.document().unwrap();
        let element = document.get_element_by_id("my_element").unwrap();
        element.scroll_into_view();
        original_scroll_position.set(window.scroll_y().unwrap());
    });

    use_drop(move || {
        /// restore scroll to the top of the page
        let window = web_sys::window().unwrap();
        window.scroll_with_x_and_y(*original_scroll_position.current(), 0.0);
    });

    rsx!{
        div {
            id: "my_element",
            "hello"
        }
    }
}