React Image Grouping Component for React Infinite.

ImageGroups.js

import React from 'react'
import Dimensions from 'react-dimensions'
import Infinite from 'react-infinite'

import ImageCard from './ImageCard'

const ImageGroups = ({
  items,
  containerWidth,
  itemWidth,
}) => {
  const itemsAcross = Math.floor(containerWidth / itemWidth)

  return (
    <Infinite
      elementHeight={256}
      useWindowAsScrollContainer={true}
      preloadBatchSize={Infinite.containerHeightScaleFactor(2)}
    >
      {items.reduce((acc, item, i, arr) => {
        if (!(i % itemsAcross)) {
          let group = []
          for (let j = i; j < i + itemsAcross; j++) {
            console.log(arr[j], j)
            const item = arr[j]
            if (item) {
              group.push(<ImageCard image={item} key={`group-item-${j}`} />)
            }
          }
          acc.push(<div className="ImageGroup" key={`image-group-${i}`}>
            {group}
          </div>)
          return acc
        }
        else {
          return acc
        }
      }, [])}
    </Infinite>
  )
}

ImageGroups.propTypes = {
  items: React.PropTypes.array.isRequired
}

export default Dimensions()(ImageGroups)