Function use_size

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

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

Example

use yew_hooks::prelude::*;

#[function_component(UseSize)]
fn size() -> Html {
    let node =  use_node_ref();
    let state = use_size(node.clone());
    
    html! {
        <div ref={node}>
            <b>{ " Width: " }</b>
            { state.0 }
            <b>{ " Height: " }</b>
            { state.1 }
        </div>
    }
}

Note

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

pub fn use_size(node: NodeRef) -> (u32, u32) {
    /* implementation omitted */
}