Use ResizeObserver to calculate grid width #2129
Conversation
src/hooks/useGridWidth.ts
Outdated
| return null; | ||
| } | ||
|
|
||
| return new ResizeObserver((entries?: ResizeObserverEntry[]) => { |
There was a problem hiding this comment.
Not sure if entries can be undefined or not so added a safeguard
src/hooks/useGridWidth.ts
Outdated
|
|
||
| return new ResizeObserver((entries?: ResizeObserverEntry[]) => { | ||
| if (Array.isArray(entries) && entries.length > 0) { | ||
| const newWidth = entries[0].borderBoxSize?.inlineSize ?? entries[0].target.getBoundingClientRect().width; |
There was a problem hiding this comment.
borderBoxSize is not supported everywhere and it is marked as experimental
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize
| setGridWidth(gridRef.current!.getBoundingClientRect().width); | ||
| } | ||
|
|
||
| // Fallback to window resize | ||
| onResize(); |
There was a problem hiding this comment.
Will the resize observer work immediately? Do we not need to call this?
There was a problem hiding this comment.
Yes, it does seem to work immediately
|
Should we remove |
|
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
Maybe we should use the border-box since we do |
We need it for the height calculation |
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
This reverts commit 9d4264c.
ResizeObserver has a pretty good browser support now
https://caniuse.com/#feat=resizeobserver
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
This can solve a few issues
TS does not have definitions for
ResizeObserverso I copied some from https://www.w3.org/TR/resize-observer/#resizeobserversize