Adds support for a specific number of loops

Author: kennethormandy

lib/keyframes.js

@@ -9,6 +9,7 @@ export default class Keyframes extends React.Component {
     delay: PropTypes.number,
     loop: PropTypes.oneOfType([
       React.PropTypes.string,
+      React.PropTypes.number,
       React.PropTypes.bool
     ]),
     onStart: PropTypes.func,
@@ -18,14 +19,17 @@ export default class Keyframes extends React.Component {
   static defaultProps = {
     component: 'span',
     delay: 0,
-    lopp: false,
+    loop: 1,
     onStart: noop,
     onEnd: noop
   };
 
   constructor (props) {
     super(props);
-    this.state = { frameNum: this.props.delay ? -1 : 0 };
+    this.state = {
+      frameNum: this.props.delay ? -1 : 0,
+      loopNum: 0
+    };
     this.timer = null;
   }
 
@@ -70,9 +74,13 @@ export default class Keyframes extends React.Component {
   requestNextFrame () {
     this.waitForDelay(() => {
       const frameNum = this.state.frameNum + 1;
+      const loopNum = this.state.loopNum + 1;
       if (this.props.children.length <= frameNum) {
-        if (this.props.loop === true || this.props.loop === 'infinite') {
-          this.setState({ frameNum: 0 });
+        if (this.props.loop === true || this.props.loop == 'infinite' || loopNum < this.props.loop) {
+          this.setState({
+            frameNum: 0,
+            loopNum
+          });
         } else {
           this.props.onEnd();
           return;