Better know a framework #24: HTML element size observation

Framework Knowledge
1

There’s often time where you want to observe width/height of an element in an easy way. There’s been many trick but with the new ResizeObserver API, it’s easier than ever. Though not every browser supports this API, so there should still be a fallback to dirty checking/other method if needed.

Here is an example of what a simple implementation for size observation custom attribute would be:
https://gist.dumber.app/?gist=a51a80be7dc589c6ad8feeae6853afda&open=src%2Fsize-observer.js

The usage of such attribute would be:

<div size.bind="size"></div>

Now whenever size of the div element above changes, our size property will be updated with the new width/height accordingly.

12 Likes
2

@bigopon, very nice!

Unfortunately I am having a hard time to convert this to typescript though :frowning:
For some reason typescript nags about ResizeObserver.

|Error|TS2304|(TS) Cannot find name ‘ResizeObserver’.

not really finding a solution, have you tried to do it with typescript?

Any help would be appreciated

1 Like
3

For TypeScript, you need to add this type definitition to your project, since ResizeObserver is not part of built in yet https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3

3 Likes