4

Used React Masonry Plugin for my alignment of cards https://github.com/eiriklv/react-masonry-component

Problem is I have expandable component in cards which increases the height of the card and masonry layout gets distorted. Plugin realigns if state of the data is update or it works on scroll. Any idea how to reload the layout manually on expandable content. Checked out issues on plugins also but didn't find an appropriate solution. Any other react wrapper pf masonry or plugin recommendations for this scenario? Thanks for help in advance

I know that using jQuery I can use reloadItems and layout methods but I am trying to avoid jquery

Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56

2 Answers2

-1

I was facing a similar issue in which I wanted to remasonrize (if you will) after each toggle show/hide of a div.
In my case I had component A as the parent (with the <Masonry> component) and components B1,B2...Bn inside it.

Every time I toggle (in your case resize) either of B1,B2...Bn it would update the state of A thus causing the Masonry component to render again.

If you post your code sample then I could help you out with the exact code.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Ganesh Iyer
  • 411
  • 5
  • 14
-1

You can access the masonry component based, as explained in the documentation: https://github.com/eiriklv/react-masonry-component#accessing-masonry-instance and perform manual layout on the instance directly.

However it seems that the update should have happen automatically in react as you probably changing the state of the component to render it in the expanded mode. So you might want to explore why the update is not happening for your case.

anyab
  • 359
  • 5
  • 11