use_element_bounding
Reactive bounding box of an HTML element
Demo
Usage
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_element_bounding::{use_element_bounding, UseElementBoundingReturn};
#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();
let UseElementBoundingReturn {
x, y, top,right,bottom,left, width, height, ..
} = use_element_bounding(el);
view! { <div node_ref=el></div> }
}SendWrapped Return
The returned closure update is a sendwrapped function. It can
only be called from the same thread that called use_element_bounding.
Server-Side Rendering
Make sure you follow the instructions in Server-Side Rendering.
On the server the returned signals always are 0.0 and update is a no-op.
Installation
cargo add leptos-use-element-bounding
Options
UseElementBoundingOptions
Options for use_element_bounding_with_options.
Every option is set with a builder method of the same name, e.g. UseElementBoundingOptions::default().reset(...). See also the API docs.
reset
Type: bool
Reset values to 0 on component disposal
Default: true
window_resize
Type: bool
Listen to window resize event
Default: true
window_scroll
Type: bool
Listen to window scroll event
Default: true
immediate
Type: bool
Immediately call update
Default: true