BS SmartGrid

SmartGrid.js

import React, { cloneElement, PropTypes } from 'react'
import { map, chunk, uniqueId } from 'lodash'

export const SmartGrid = ({ columns = 3, minWidth = 'sm', children }) => {
  const cols = parseInt(12 / columns, 10)
  const join = (...classes) => classes.join(' ')
  return (
    <div>
      {map(chunk(children, columns), (kids, index) =>
        <div className="row" key={index}>
          {map(kids, child =>
            cloneElement(child, {
              className: join(`col-${minWidth}-${cols}`, child.props.className),
              key: uniqueId('column'),
            })
          )}
        </div>
      )}
    </div>
  )
}

SmartGrid.propTypes = {
  columns: PropTypes.number,
  minWidth: PropTypes.string,
  children: PropTypes.array.isRequired,
}