Stuggling to get positioning to work with useMasonry

[johtso]

I managed to get things working quite quickly with the Masonry component, but after reading in the docs that you could avoid the need for a resize observer by using useMasonry I decided to try and switch to that approach.

Unfortunately it's not quite working right, the first few items are being positioned on top of each other. It's not obvious how to go about diagnosing why that is. I'm hoping there's something obvious that I've overlooked that you might be able to point out!

I put together a small codesandbox: https://codesandbox.io/s/modest-feynman-02o4y9

[jaredLunde]

Out of town. Maybe your math is wrong? Works in the recipe: https://codesandbox.io/embed/usemasonry-example-3pcg9?file=/src/index.js&codemirror=1

If you're dynamically changing sizes you still need to recalculate positions when that happens, eg when the window resizes.

[johtso]

Thanks for the reply! That's what has me confused, as far as I can tell I'm following the same approach as the recipe. My items have fixed aspect ratio, the items in the recipe also resize when the window is resized.

Here's the same code with the only difference being using the Masonry component that works perfectly: https://codesandbox.io/s/pedantic-cohen-bt7el9

[dnish]

Had the same issue, I've used the same code from the sandbox, the Masonry component was working, when using useMasonry, all items were overlapping. After a while I've checked the code within the Masonry component and notices, that the following fixes the issue:

const positioner = usePositioner({width: width || windowWidth,columnCount:3});

It was important to add width || windowWidth. On the first rendering, width is 0. After adding it, the items were rendered correctly.