[][src]Crate yew_component_size

Crates.io Crates.io

A Yew component that emits events when the parent component changes width/height. Only compatible with Yew using web_sys.


let onsize = self.link.callback(|size: ComponentSize| {
    // Access to `size.width` and `size.height`

html! {
    // Parent that you're tracking the size of must be `position: relative`
    <div style="position: relative;">
        // ...
        <ComponentSizeObserver onsize=onsize />

How it works

This uses a trick borrowed from Svelte where we use an iframe that is positioned absolutely to fill it's parent element, and then we listen to the resize event of iframe's window.

Note: This incurs a small cost and so should not be used on a large number of elements at the same time.


Licensed under either of

  • Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
  • MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.


Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.



A struct containing the width and height of the component


Yew component to observe changes to the size of the parent element.


ComponentSizeObserver properties