React Masonry Layout with Infinite Scroll

Installation

npm install --save react-masonry-infinite-scroll

Demo

Live demo

How to use

First add Grid container for the layout. And then insert GridItems into it:

import { Grid, GridItem } from 'react-masonry-infinite-scroll';

...

notifyReadyState() {
  console.log('Grid is ready!');
}

render() {
    return (

           <Grid
          columnWidth={260}
          fitWidth={true}
          gutter={5}
          loadMore={this.props.getPins}
          limit={6}
          scrollThreshold={400}
          itemsLeft={this.props.itemsLeft}
          notifyReadyState={this.notifyReadyState}
        >
            { this.renderGrid() }
        </Grid>
     );
 }


renderGrid() {
    return (
        this.props.images(img => (
            <GridItem>
                <img src={ img }  onLoad={ this.context.imageLoaded } />
            </GridItem>
        ))
    );
}

Props