use_element_size
Reactive size of an HTML element.
Please refer to ResizeObserver on MDN for more details.
Demo
Usage
use leptos::{html::Div, prelude::*};
use leptos_use_element_size::{use_element_size, UseElementSizeReturn};
#[component]
fn Demo() -> impl IntoView {
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
Make sure you follow the instructions in Server-Side Rendering.
On the server the returned signals always contain the value of the initial_size option.
See also
Installation
cargo add leptos-use-element-size
Options
UseElementSizeOptions
Options for use_element_size_with_options.
Every option is set with a builder method of the same name, e.g. UseElementSizeOptions::default().initial_size(...). See also the API docs.
initial_size
Type: Size
Initial size returned before any measurements on the target are done. Also the value reported
at first when the target is a signal and changes.
box_
Type: Option<web_sys::ResizeObserverBoxOptions>
The box that is used to determine the dimensions of the target. Defaults to ContentBox.