eiriklv/react-masonry-component

StrictMode breaks Masonry

solarlime opened this issue · 2 comments

solarlime commented

Hello, everyone!

I tried to use 'react-masonry-component' but found very strange behaviour (as for me). Wrapping with <React.StrictMode> breaks masonry - it does not set any positioning.

Layout with and without StrictMode:
With StrictMode Without StrictMode

Inline styles with and without StrictMode:
With StrictMode
Without StrictMode

It can be fixed by adding { position: relative } to a parent and { position: absolute } to children, but it's a dirty fix: also masonry stops rebuilding on resize, you need to trigger the layout function. Any ideas?

Reproduced in Codesandbox

hussain-nz commented

Thanks for helping us fix our issue too! We upgraded to React 18 and got the same issue.
Using "position: relative" on the parent's "style" property didn't work. It worked when using a class in className (in our case, tailwind "relative").

  • 👍1