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, *};
use leptos_use::use_resize_observer;

#[component]
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let (text, set_text) = create_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>
}
}

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