search

cedricdelpoux / react-responsive-masonry

React responsive masonry component built with css flexbox
https://cedricdelpoux.github.io/react-responsive-masonry/
MIT License
362 stars 37 forks source link

Feature request: ignore any children whose values are false or null #42

Closed antonivlev closed 3 years ago

antonivlev commented 3 years ago

Hi! Thank you for this library.

When using the <Masonry> component, sometimes we conditionally hide the children. This however messes up the layout, see https://codesandbox.io/s/exciting-chandrasekhar-v3zq5?file=/src/App.js

We have work arounds, but would it be possible to completely ignore a child (so don't wrap it with a container) if it's falsy?

RavdeepSingh99 commented 3 years ago

@cedricdelpoux Hi, how are you?

I'd face the same issue as mentioned by @antonivlev.

I am able to fix this issue, as the issue is in Masonry Component. Please Let me know if you are accepting PR on this issue. Thanks!

RavdeepSingh99 commented 3 years ago

@antonivlev A temporary solution is that you can add this SCSS to Masonry Component. This SCSS can be used for the codesandbox that you shared, which is first element in first column being falsy. Downside to this method is that column and element should be known in advance. The below code is JSS for SCSS.

masonry: {
  '& > div:nth-of-type(1)': {      // this can be any column of masonry
    '& > div:nth-of-type(1)': {    // this can be any nth-children in column
        marginTop: '0px !important'
    }
  }
}
cedricdelpoux commented 3 years ago

Hi @antonivlev, thank you for this feature request.

PRs are always welcome.

Thank you

cedricdelpoux commented 3 years ago

published in 2.1.3