change from a function to a React class

README.md

@@ -21,12 +21,12 @@ React >= 0.14.x
 * You can optionally include Packery as a script tag if there should be any reason for doing so:
 `<script src='//cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js' />`
 
-* To use the component just require the module and inject `React`
-* Example code:
+* To use the component just require the module
+* Example es5 code:
 
 ```js
 var React = require('react');
-var Packery = require('react-packery-component')(React);
+var Packery = require('react-packery-component');
 
 var packeryOptions = {
     transitionDuration: 0
@@ -57,3 +57,42 @@ var Gallery = React.createClass({
 
 module.exports = Gallery;
 ```
+* Example es2015 code:
+
+```js
+import React,{Component} from 'react';
+import Packery from 'react-packery-component';
+
+const packeryOptions = {
+    transitionDuration: 0
+};
+
+class Gallery extends Component {
+    constructor() {
+        super();
+    }
+    render() {
+        const childElements = this.props.elements.map((element) => {
+           return (
+                <li className="image-element-class">
+                    <img src={element.src} />
+                </li>
+            );
+        });
+
+        return (
+            <Packery
+                className={'my-gallery-class'} // default ''
+                elementType={'ul'} // default 'div'
+                options={packeryOptions} // default {}
+                disableImagesLoaded={false} // default false
+            >
+                {childElements}
+            </Packery>
+        );
+    }
+});
+
+export default Gallery;
+```
+

lib/index.js

@@ -1,10 +1,21 @@
 var isBrowser = (typeof window !== 'undefined');
 var Packery = isBrowser ? window.Packery || require('packery') : null;
 var imagesloaded = isBrowser ? require('imagesloaded') : null;
+var React = require('react');
 var refName = 'packeryContainer';
 
-function PackeryComponent(React) {
-    return React.createClass({
+function extend() {
+    var result = {};
+    for (var i = 0; i < arguments.length; i++) {
+        var keys = Object.keys(arguments[i]);
+        for (var j = 0; j < keys.length; j++) {
+            result[keys[j]] = arguments[i][keys[j]];
+        }
+    }
+    return result;
+}
+
+PackeryComponent = React.createClass({
         packery: false,
 
         domChildren: [],
@@ -176,12 +187,9 @@ function PackeryComponent(React) {
         },
 
         render: function() {
-            return React.createElement(this.props.elementType, {
-                className: this.props.className,
-                ref: refName
-            }, this.props.children);
+            return React.createElement(this.props.elementType, extend(this.props, {ref: refName}), this.props.children);
         }
     })
-}
+
 
 module.exports = PackeryComponent;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-packery-component",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "main": "./lib/index",
   "description": "A Packery component for React.js",
   "dependencies": {