Function use_measure

pub fn use_measure<'hook>(
    node: NodeRef,
) -> impl 'hook + Hook<Output = UseMeasureState>

A sensor hook that tracks an HTML element’s dimensions using the ResizeObserver API.

Example

use yew_hooks::prelude::*;

#[function_component(UseMeasure)]
fn measure() -> Html {
    let node =  use_node_ref();
    let state = use_measure(node.clone());
    
    html! {
        <div ref={node}>
            <b>{ " X: " }</b>
            { state.x }
            <b>{ " Y: " }</b>
            { state.y }
            <b>{ " Width: " }</b>
            { state.width }
            <b>{ " Height: " }</b>
            { state.height }
            <b>{ " Top: " }</b>
            { state.top }
            <b>{ " Left: " }</b>
            { state.left }
            <b>{ " Bottom: " }</b>
            { state.bottom }
            <b>{ " Right: " }</b>
            { state.right }
        </div>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_measure(node: NodeRef) -> UseMeasureState {
    /* implementation omitted */
}