use_element_bounding

Reactive bounding box of an HTML element

Demo

Usage

use leptos::*;
use leptos::html::Div;
use leptos_use::{use_element_bounding, UseElementBoundingReturn};

#[component]
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let UseElementBoundingReturn {
    x, y, top,right,bottom,left, width, height, ..
} = use_element_bounding(el);

view! { <div node_ref=el></div> }
}

Server-Side Rendering

On the server the returned signals always are 0.0 and update is a no-op.

Types

• struct UseElementBoundingOptions
• struct UseElementBoundingReturn

Source

Source • Demo • Docs