use_mutation_observer

Reactive MutationObserver.

Watch for changes being made to the DOM tree.

Demo

Usage

use leptos::prelude::*;
use leptos::html::Pre;
use leptos_use::{use_mutation_observer_with_options, UseMutationObserverOptions};

#[component]
fn Demo() -> impl IntoView {
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.

Feature

This function is only available if the crate feature use_mutation_observer is enabled

Types

• struct UseMutationObserverOptions
• struct UseMutationObserverReturn

Source

Source • Demo • Docs