enable to set any props to component

Author: nkzawa

lib/frame.js

@@ -3,13 +3,11 @@ import React, { PropTypes } from 'react';
 export default class Frame extends React.Component {
   static propTypes = {
     children: PropTypes.any,
-    component: PropTypes.string,
     duration: PropTypes.number,
     onRender: PropTypes.func
   };
 
   static defaultProps = {
-    component: null,
     duration: 0,
     onRender: () => {}
   };
@@ -23,7 +21,6 @@ export default class Frame extends React.Component {
   }
 
   render () {
-    const { component } = this.props;
-    return React.createElement(component, null, this.props.children);
+    return null;
   }
 }

lib/keyframes.js

@@ -5,7 +5,7 @@ const noop = () => {};
 export default class Keyframes extends React.Component {
   static propTypes = {
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    component: PropTypes.string,
+    component: PropTypes.any,
     delay: PropTypes.number,
     onStart: PropTypes.func,
     onEnd: PropTypes.func
@@ -58,8 +58,11 @@ export default class Keyframes extends React.Component {
     const frame = this.getFrame();
     if (!frame) return null;
 
-    const component = frame.props.component || this.props.component;
-    return React.cloneElement(frame, { component });
+    return React.createElement(
+      this.props.component,
+      this.props,
+      frame.props.children
+    );
   }
 
   requestNextFrame () {

test/index.js

@@ -58,3 +58,17 @@ test('Keyframes events', (t) => {
   clock.tick(100);
   t.ok(onEnd.called);
 });
+
+test('set component', (t) => {
+  const container = document.createElement('div');
+  const component = render(
+    <Keyframes component="pre" className="woot">
+      <Frame>foo</Frame>
+      <Frame>bar</Frame>
+    </Keyframes>,
+    container
+  );
+  const node = findDOMNode(component);
+  t.same(node.tagName, 'PRE');
+  t.same(node.className, 'woot');
+});