Function leptos_use::use_element_size

pub fn use_element_size<El, T>(target: El) -> UseElementSizeReturn
where
    El: Into<ElementMaybeSignal<T, Element>> + Clone,
    T: Into<Element> + Clone + 'static,

Reactive size of an HTML element.

Please refer to ResizeObserver on MDN for more details.

Demo

Link to Demo

Usage

let el = create_node_ref::<Div>();

let UseElementSizeReturn { width, height } = use_element_size(el);

view! {
    <div node_ref=el>
        "Width: " {width}
        "Height: " {height}
    </div>
}

Server-Side Rendering

On the server the returned signals always contain the value of the initial_size option.

See also

• [use_resize_observer]