[help request] Resize cells when parent container width changes

[samwyzz]

I would like to resize cell sizes (widths and heights) when the grids parent container width is changed by a button toggle for example.

As I understand, the usePositioner hook is responsible for updating the widths and positions of cells if the width of the parent container changes and useResizeObeserver hook is meant to update height of cell sizes if the width of the cell sizes changes. Currently when dynamically changing the width of the containerRef, the cells do not resize in width or height and overflow the parent container.

The behavior I had expected was resizing the parent container would be similar to how the cell sizes adjust when resizing the browser window.

Would be a huge help if possible to please have a look at the forked example and please advise where I am making a mistake.

https://codesandbox.io/s/masonic-resize-container-test-38lzo?file=/src/index.js:1745-1774

Thanking you,

[motakbiri2]

Hi @samwyzz may I ask how did you fix your issue?

[samwyzz]

@mo-klue Very sorry for not being able to respond sooner, wish I could have helped.

I did get it to work, but the app I was building was facing other issues mainly not being able to integrate framer-motion layout and exit animations with masonic.

And also that resizing the grid items was causing layout thrashing / page reflow which was causing performance issues.

Due to lack of time to find an adequate solution I eventually abandoned masonic and instead used the intersection observer api for the purpose of reducing rendered grid items.

Again, my apologies I could not respond sooner, I hope you were able to find a solution.