Skip to content

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

Notifications You must be signed in to change notification settings

AircastDev/yew-component-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Languages