Update deps and use React.cloneElement instead of cloneWithProps.

Author: STRML

lib/Resizable.jsx

@@ -1,13 +1,9 @@
 'use strict';
 var React = require('react');
 var Draggable = require('react-draggable');
-var assign = require('object-assign');
-var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
-var cloneWithProps = require('react/lib/cloneWithProps');
 
 var Resizable = module.exports = React.createClass({
   displayName: 'Resizable',
-  mixins: [PureRenderMixin],
 
   propTypes: {
     children: React.PropTypes.element,
@@ -54,13 +50,13 @@ var Resizable = module.exports = React.createClass({
 
   render() {
     var p = this.props;
+
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
     // A draggable handle.
-
-    return cloneWithProps(p.children, assign({}, p, {
-      children: [
+    return React.cloneElement(p.children, p,
+      [
         p.children.props.children,
         <Draggable
           {...p.draggableOpts}
@@ -71,11 +67,12 @@ var Resizable = module.exports = React.createClass({
           onDrag={this.resizeHandler('onResize')}
           minConstraints={this.minConstraints()}
           maxConstraints={this.maxConstraints()}
+          key="draggable"
           >
           <span className="react-resizable-handle" />
         </Draggable>
       ]
-    }));
+    );
   }
 });
 

lib/ResizableBox.jsx

@@ -1,12 +1,10 @@
 'use strict';
 var React = require('react');
-var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
 var Resizable = require('./Resizable');
 
 // An example use of Resizable.
 var ResizableBox = module.exports = React.createClass({
   displayName: 'ResizableBox',
-  mixins: [PureRenderMixin],
 
   propTypes: {
   },

package.json

@@ -27,27 +27,30 @@
   },
   "homepage": "https://github.com/STRML/react-resizable",
   "devDependencies": {
-    "6to5": "^2.2.0",
-    "6to5-loader": "^1.0.0",
-    "css-loader": "^0.9.0",
-    "jshint": "^2.5.11",
-    "lodash": "^2.4.1",
-    "precommit-hook": "^1.0.7",
-    "react": "^0.12.2",
-    "react-hot-loader": "^1.0.4",
-    "style-loader": "^0.8.2",
-    "webpack": "^1.4.14",
-    "webpack-dev-server": "^1.7.0"
+    "babel": "^5.0.1",
+    "babel-core": "^5.0.1",
+    "babel-loader": "^5.0.0",
+    "css-loader": "^0.9.1",
+    "jshint": "^2.6.3",
+    "lodash": "^3.6.0",
+    "pre-commit": "^1.0.6",
+    "precommit-hook": "^2.0.1",
+    "react": "^0.13.1",
+    "react-hot-loader": "^1.2.4",
+    "style-loader": "^0.9.0",
+    "webpack": "^1.7.3",
+    "webpack-dev-server": "^1.8.0"
+  },
+  "peerDependencies": {
+    "react": "^0.13"
   },
   "dependencies": {
-    "object-assign": "^2.0.0",
     "react-draggable": "strml/react-draggable"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "precommit": [
-    "check-build",
     "lint"
   ]
 }

webpack-dev-server.config.js

@@ -12,12 +12,12 @@ module.exports = {
     },
     module: {
       loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: '6to5-loader?experimental=true'},
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
         {test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader'}
       ]
     },
     debug: true,
-    devtool: "#inline-source-map",
+    devtool: "eval",
     resolve: {
       extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
     }

webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     },
     module: {
       loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: '6to5-loader?experimental=true'},
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
       ]
     },
     resolve: {