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_resize_observer::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
Installation
cargo add leptos-use-resize-observer
Options
UseResizeObserverOptions
Options for use_resize_observer_with_options.
Every option is set with a builder method of the same name, e.g. UseResizeObserverOptions::default().box_(...). See also the API docs.
box_
Type: Option<web_sys::ResizeObserverBoxOptions>
The box that is used to determine the dimensions of the target. Defaults to ContentBox.