refactor AnimatedProgressbar -> AnimatedProgressProvider

demo/src/AnimatedProgressProvider.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Animate } from 'react-move';
+
+type Props = {
+  duration: number;
+  easingFunction: Function;
+  percentageStart: number;
+  percentageEnd: number;
+  children: (percentage: number) => React.ReactElement;
+};
+
+type State = {
+  isAnimated: boolean;
+};
+
+class AnimatedProgressProvider extends React.Component<Props, State> {
+  state = {
+    isAnimated: false,
+  };
+
+  static defaultProps = {
+    percentageStart: 0,
+  };
+
+  componentDidMount() {
+    this.setState({
+      isAnimated: true,
+    });
+  }
+
+  render() {
+    return (
+      <Animate
+        start={() => ({
+          percentage: this.props.percentageStart,
+        })}
+        update={() => ({
+          percentage: [
+            this.state.isAnimated ? this.props.percentageEnd : this.props.percentageStart,
+          ],
+          timing: {
+            duration: this.props.duration * 1000,
+            ease: this.props.easingFunction,
+          },
+        })}
+      >
+        {({ percentage }) => this.props.children(percentage)}
+      </Animate>
+    );
+  }
+}
+
+export default AnimatedProgressProvider;

demo/src/AnimatedProgressbar.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Animate } from 'react-move';
-import { CircularProgressbar } from 'react-circular-progressbar';
-
-type Props = {
-  duration: number;
-  easingFunction: Function;
-  percentage: number;
-};
-
-type State = {
-  isAnimated: boolean;
-};
-
-class AnimatedProgressbar extends React.Component<Props, State> {
-  state = {
-    isAnimated: false,
-  };
-
-  componentDidMount() {
-    this.setState({
-      isAnimated: true,
-    });
-  }
-
-  render() {
-    return (
-      <Animate
-        start={() => ({
-          percentage: 0,
-        })}
-        update={() => ({
-          percentage: [this.state.isAnimated ? this.props.percentage : 0],
-          timing: {
-            duration: this.props.duration * 1000,
-            ease: this.props.easingFunction,
-          },
-        })}
-      >
-        {({ percentage }) => {
-          const roundedPercentage = Math.round(percentage);
-          return (
-            <CircularProgressbar
-              value={percentage}
-              text={`${roundedPercentage}%`}
-              styles={{
-                path: {
-                  transition: 'none',
-                },
-              }}
-            />
-          );
-        }}
-      </Animate>
-    );
-  }
-}
-
-export default AnimatedProgressbar;

demo/src/Demo.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { easeSinOut, easeQuadIn, easeQuadInOut, easeLinear, easeCubicInOut } from 'd3-ease';
 
 // Custom progressbar wrappers
-import AnimatedProgressbar from './AnimatedProgressbar';
+import AnimatedProgressProvider from './AnimatedProgressProvider';
 import ChangingProgressProvider from './ChangingProgressProvider';
 import ProgressProvider from './ProgressProvider';
 
@@ -146,7 +146,22 @@ function Demo() {
             </span>
           }
         >
-          <AnimatedProgressbar percentage={66} duration={1.4} easingFunction={easeQuadInOut} />
+          <AnimatedProgressProvider
+            percentageEnd={66}
+            duration={1.4}
+            easingFunction={easeQuadInOut}
+          >
+            {(percentage) => {
+              const roundedPercentage = Math.round(percentage);
+              return (
+                <CircularProgressbar
+                  value={percentage}
+                  text={`${roundedPercentage}%`}
+                  styles={buildStyles({ pathTransition: 'none' })}
+                />
+              );
+            }}
+          </AnimatedProgressProvider>
         </Example>
 
         <Example