Add support for className & typeName

FlipMove works by enclosing the children it's wrapped around in an
ordinary, no-attribute <div>. Someone messaged me asking if I could
add the ability to supply a custom `className`, so that he could add
a `row` class to the container, so that it would play nice with
Foundation.

While I was there, I also added a `typeName` field, which allows
you to select a different element than `div`. So, if your children
are <li>s, you might want to supply 'ul'.

dist/react-flip-move.js

@@ -319,23 +319,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'childrenWithRefs',
 	    value: function childrenWithRefs() {
-	      // Convert the children to an array, and map.
-	      // Cannot use React.Children.map directly, because the #toArray method
-	      // re-maps some of the keys ('1' -> '.$1'). We need this behaviour to
-	      // be consistent, so we do this conversion upfront.
-	      // See: https://github.com/facebook/react/pull/3650/files
 	      return this.props.children.map(function (child) {
 	        return _react2.default.cloneElement(child, { ref: child.key });
 	      });
 	    }
 	  }, {
 	    key: 'render',
 	    value: function render() {
-	      return _react2.default.createElement(
-	        'div',
-	        null,
-	        this.childrenWithRefs()
-	      );
+	      return _react2.default.createElement(this.props.typeName, { className: this.props.className }, this.childrenWithRefs());
 	    }
 	  }]);
 
@@ -432,13 +423,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    staggerDurationBy: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
 	    staggerDelayBy: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
 	    onStart: _react.PropTypes.func,
-	    onFinish: _react.PropTypes.func
+	    onFinish: _react.PropTypes.func,
+	    className: _react.PropTypes.string,
+	    typeName: _react.PropTypes.string
 	  }, _class.defaultProps = {
 	    easing: 'ease-in-out',
 	    duration: 350,
 	    delay: 0,
 	    staggerDurationBy: 0,
-	    staggerDelayBy: 0
+	    staggerDelayBy: 0,
+	    typeName: 'div'
 	  }, _temp;
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flip-move",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.",
   "main": "lib/index.js",
   "files": [

src/FlipMove.js

@@ -135,10 +135,10 @@ class FlipMove extends Component {
   }
 
   render() {
-    return (
-      <div>
-        {this.childrenWithRefs()}
-      </div>
+    return React.createElement(
+      this.props.typeName,
+      { className: this.props.className },
+      this.childrenWithRefs()
     );
   }
 }

src/prop-converter.js

@@ -66,15 +66,18 @@ function propConverter(ComposedComponent) {
                             PropTypes.number
                           ]),
       onStart:            PropTypes.func,
-      onFinish:           PropTypes.func
+      onFinish:           PropTypes.func,
+      className:          PropTypes.string,
+      typeName:           PropTypes.string
     };
 
     static defaultProps = {
       easing:             'ease-in-out',
       duration:           350,
       delay:              0,
       staggerDurationBy:  0,
-      staggerDelayBy:     0
+      staggerDelayBy:     0,
+      typeName:           'div'
     };
   }
 }