fill out v1.x.x -> v2.0.0 migration, tweak ProgressProvider prop names

UPGRADING.md

@@ -1,3 +1,55 @@
+# Migration guide for major versions
+
+## 1.x.x to 2.0.0
+
+**Use a named import to import CircularProgressbar**
+
+Before:
+
+```jsx
+import CircularProgressbar from 'react-circular-progressbar';
+```
+
+After:
+
+```jsx
+import { CircularProgressbar } from 'react-circular-progressbar';
+```
+
+**Use `props.value` instead of `props.percentage`**
+
+Before:
+
+```jsx
+<CircularProgressbar percentage={66} />
+```
+
+After:
+
+```jsx
+<CircularProgressbar value={66} />
+```
+
+**Replace `props.initialAnimation` with a wrapper component**
+
+This is only applicable if you're using `props.initialAnimation`, which is removed in v2.0.0. Instead, you must trigger the animation by changing `value` from one value to another yourself.
+
+Before:
+
+```jsx
+<CircularProgressbar percentage={66} initialAnimation />
+```
+
+After:
+
+You'll need a wrapper component to help manage the value transition. See [ProgressProvider.tsx](demo/src/ProgressProvider.tsx) for an example. Once you have that, you can do:
+
+```jsx
+<ProgressProvider valueStart={0} valueEnd={66}>
+  {(value) => <CircularProgressbar value={value} />}
+</ProgressProvider>
+```
+
 ## 0.x.x to 1.0.0
 
 The main breaking change is the replacement of the `classForPercentage` prop with `className`, and the `textForPercentage` prop with `text` [#61].

demo/src/Demo.tsx

@@ -172,11 +172,11 @@ function Demo() {
             </span>
           }
         >
-          <ProgressProvider percentageStart={10} percentageEnd={66}>
-            {(percentage) => (
+          <ProgressProvider valueStart={10} valueEnd={66}>
+            {(value) => (
               <CircularProgressbar
-                value={percentage}
-                text={`${percentage}%`}
+                value={value}
+                text={`${value}%`}
                 circleRatio={0.75}
                 styles={buildStyles({
                   rotation: 1 / 2 + 1 / 8,

demo/src/ProgressProvider.tsx

@@ -2,30 +2,30 @@ import React from 'react';
 import { CircularProgressbar } from 'react-circular-progressbar';
 
 type Props = {
-  percentageStart: number;
-  percentageEnd: number;
-  children: (percentage: number) => React.ReactNode;
+  valueStart: number;
+  valueEnd: number;
+  children: (value: number) => React.ReactNode;
 };
 
 type State = {
-  percentage: number;
+  value: number;
 };
 
 class ProgressProvider extends React.Component<Props, State> {
   timeout: number | undefined = undefined;
 
   state = {
-    percentage: this.props.percentageStart,
+    value: this.props.valueStart,
   };
 
   static defaultProps = {
-    percentageStart: 0,
+    valueStart: 0,
   };
 
   componentDidMount() {
     this.timeout = window.setTimeout(() => {
       this.setState({
-        percentage: this.props.percentageEnd,
+        value: this.props.valueEnd,
       });
     }, 0);
   }
@@ -35,7 +35,7 @@ class ProgressProvider extends React.Component<Props, State> {
   }
 
   render() {
-    return this.props.children(this.state.percentage);
+    return this.props.children(this.state.value);
   }
 }