leptos_use

Function use_element_size

Source 
pub fn use_element_size<El, M>(target: El) -> UseElementSizeReturn
where
    El: IntoElementMaybeSignal<Element, M>,
Expand description

Reactive size of an HTML element.

Please refer to ResizeObserver on MDN for more details.

§Demo

Link to Demo

§Usage

let el = NodeRef::<Div>::new();

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