Adding load more

[TrixieL]

@xuopled Hi Cedric!

Again, thanks for answering my emails. I was wondering if we can have a feature which loads more photos when a button is clicked (in contrast with infinite scrolling). The number of photos shown by default as well as the number of photos to be loaded should be customizable; considering different screen sizes (mobiles and desktop).

Thanks!! :)

[cedricdelpoux]

Hi, you can achieve this with a custom wrapper. It is not the responsibility of react-responsive-masonry.

class MyWrapper extends Component {
  constructor() {
    this.state = {
      images = []
  }

  loadMore() {
   // Your load more magic
    this.setState({images: newImages})
  }

  render() {
    return (
        <ResponsiveMasonry columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}>
            <Masonry>
                {this.state.images.map((image, i) =>
                    <img key={i} src={image} style={{width: "100%", display: "block"}} />
                )}
            </Masonry>
        </ResponsiveMasonry>
    )
  }
}