Function leptos_use::use_resize_observer

source · 
pub fn use_resize_observer<El, T, F>(
    target: El,
    callback: F,
) -> UseResizeObserverReturn<impl Fn() + Clone>
where
    El: Into<ElementsMaybeSignal<T, Element>>,
    T: Into<Element> + Clone + 'static,
    F: FnMut(Vec<ResizeObserverEntry>, ResizeObserver) + 'static,
Expand description

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

Please refer to ResizeObserver on MDN for more details.

§Demo

Link to Demo

§Usage

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