use_resize_observer

Reports changes to the dimensions of an Element's content or the border-box.

Please refer to ResizeObserver on MDN for more details.

Demo

Usage

use leptos::{html::Div, prelude::*};
use leptos_use::use_resize_observer;

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();
let (text, set_text) = signal("".to_string());

use_resize_observer(
    el,
    move |entries, observer| {
        let rect = entries[0].content_rect();
        set_text.set(format!("width: {}\nheight: {}", rect.width(), rect.height()));
    },
);

view! {
    <div node_ref=el>{ move || text.get() }</div>
}
}

SendWrapped Return

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

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

On the server this amounts to a no-op.

See also

• use_element_size

Feature

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

Types

• struct UseResizeObserverOptions
• struct UseResizeObserverReturn

Source

Source • Demo • Docs