use_element_bounding

Reactive bounding box of an HTML element

Demo

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{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

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

Feature

This function is only available if the crate feature use_element_bounding is enabled

Types

• struct UseElementBoundingOptions
• struct UseElementBoundingReturn

Source

Source • Demo • Docs