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_element::{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
Make sure you follow the instructions in Server-Side Rendering.
On the server this amounts to a no-op.
Installation
cargo add leptos-use-element
Options
UseMutationObserverOptions
Options for use_mutation_observer_with_options.
Every option is set with a builder method of the same name, e.g. UseMutationObserverOptions::default().subtree(...). See also the API docs.
subtree
Type: bool
Set to true to extend monitoring to the entire subtree of nodes rooted at target.
All of the other properties are then extended to all of the nodes in the subtree
instead of applying solely to the target node. The default value is false.
child_list
Type: bool
Set to true to monitor the target node (and, if subtree is true, its descendants)
for the addition of new child nodes or removal of existing child nodes.
The default value is false.
attributes
Type: bool
Set to true to watch for changes to the value of attributes on the node or nodes being
monitored. The default value is true if either of attribute_filter or
attribute_old_value is specified, otherwise the default value is false.
attribute_filter
Type: Option<Vec<String>>
An array of specific attribute names to be monitored. If this property isn’t included, changes to all attributes cause mutation notifications.
attribute_old_value
Type: bool
Set to true to record the previous value of any attribute that changes when monitoring
the node or nodes for attribute changes; See
Monitoring attribute values
for an example of watching for attribute changes and recording values.
The default value is false.
character_data
Type: Option<bool>
Set to true to monitor the specified target node
(and, if subtree is true, its descendants)
for changes to the character data contained within the node or nodes.
The default value is true if character_data_old_value is specified,
otherwise the default value is false.
character_data_old_value
Type: bool
Set to true to record the previous value of a node’s text whenever the text changes on
nodes being monitored. The default value is false.