#yew-component #emit #width-height #parent #events #size #element

yew-component-size

A Yew component that emits events when the parent component changes width/height

1 unstable release

0.1.0 Dec 12, 2020

#1007 in WebAssembly

Download history 20/week @ 2023-11-20 35/week @ 2023-11-27 30/week @ 2023-12-04 50/week @ 2023-12-11 6/week @ 2023-12-18 8/week @ 2024-01-22 60/week @ 2024-02-05 56/week @ 2024-02-12 57/week @ 2024-02-19 83/week @ 2024-02-26 115/week @ 2024-03-04

311 downloads per month
Used in yew-virtual-scroller

MIT/Apache

8KB
73 lines

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.

Example:

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 />
    </div>
}

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.

License

Licensed under either of

at your option.

Contribution

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.

Dependencies

~12MB
~229K SLoC