Function use_mutation_observer

pub fn use_mutation_observer<El, M, F>(
    target: El,
    callback: F,
) -> UseMutationObserverReturn<impl Fn() + Clone + Send + Sync>
where
    El: IntoElementsMaybeSignal<Element, M>,
    F: FnMut(Vec<MutationRecord>, MutationObserver) + 'static,

Reactive MutationObserver.

Watch for changes being made to the DOM tree.

Demo

Link to Demo

Usage

let el = NodeRef::<Pre>::new();
let (text, set_text) = signal("".to_string());

use_mutation_observer_with_options(
    el,
    move |mutations, _| {
        if let Some(mutation) = mutations.first() {
            set_text.update(|text| *text = format!("{text}\n{:?}", mutation.attribute_name()));
        }
    },
    UseMutationObserverOptions::default().attributes(true),
);

view! {
    <pre node_ref=el>{ text }</pre>
}

SendWrapped Return

The returned closure stop is a sendwrapped function. It can only be called from the same thread that called use_mouse_in_element.

Server-Side Rendering

On the server this amounts to a no-op.