paulcollett / react-masonry-css

React Masonry layout component powered by CSS, dependancy free
https://paulcollett.github.io/react-masonry-css/demo/
MIT License
962 stars 66 forks source link

Allow fluid rendering of dynamic children #47

Open rsquires opened 4 years ago

paulcollett commented 4 years ago

Sure. I think something like this would be nice for the majority of cases. I'm just a little unsure if this is a breaking change that may impact implementations already out there or something we can add - what do you think? I'm curious what is being passed as a child to create those falsy items to begin too, at least in your case?

On Wed, Jan 15, 2020 at 7:59 AM Ross Squires notifications@github.com wrote:

@rsquires commented on this pull request.

In src/react-masonry-css.js https://github.com/paulcollett/react-masonry-css/pull/47#discussion_r366958500 :

@@ -114,7 +114,7 @@ class Masonry extends React.Component { const itemsInColumns = new Array(currentColumnCount);

 // Force children to be handled as an array
  • const items = [].concat(this.props.children || []);
  • const items = [].concat(this.props.children || []).filter(child => child);

It creates an empty column. If you have a 3 column layout, and your children are something like [real element, falsy, real element], the middle column is empty. Maybe it's a false assumption, but I was hoping it would attempt to "left justify" the real children. I have not tried React.Children.toArray, will give that a go.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/paulcollett/react-masonry-css/pull/47?email_source=notifications&email_token=AAORBBWBNMBTC6TXKH2UR63Q54XGDA5CNFSM4KGFH35KYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCR3MOVY#discussion_r366958500, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAORBBUGK6CMQMNGA53RBODQ54XGDANCNFSM4KGFH35A .