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.