leptos_use

Function use_resize_observer

Source 
pub fn use_resize_observer<Els, M, F>(
    target: Els,
    callback: F,
) -> UseResizeObserverReturn<impl Fn() + Clone + Send + Sync>
where
    Els: IntoElementsMaybeSignal<Element, M>,
    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 = 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

On the server this amounts to a no-op.

§See also