englercj / react-packery-draggabilly

An es6 React.js component for using @desandro's Packery and Draggabilly

React Packery Draggabilly Component

Introduction:

An ES6 React.js Packery Draggabilly component.

Support

React >= 0.14.x

Usage:

• Example code:

import React, { Component } from 'react'
import PackeryComponent from './Packery'

const packeryOptions = {
    // transitionDuration: 0,
    gutter: 10,
    columnWidth: 225
}

class MyPackery extends Component{

  render = function () {

    const childElements = this.props.elements.map(function(child, index){
     return (
        <div key={index} className="child">
          {child.topic.title}
        </div>
      )
    })

    return (
      <PackeryComponent
        ref="PackeryComponent"
        className={'packery'}
        elementType={'div'}
        options={packeryOptions}
        disableImagesLoaded={false}
      >
        {childElements}
      </PackeryComponent>
    )
  }
};

module.exports = MyPackery;