Migrate to new countup version (#509)

* Migrate to new countup version

* Update snapshot

* Update README.md

README.md

@@ -153,8 +153,8 @@ Note that `delay={0}` will automatically start the count up.
 import { useCountUp } from 'react-countup';
 
 const SimpleHook = () => {
-  const { countUp } = useCountUp({ end: 1234567 });
-  return <div>{countUp}</div>;
+  useCountUp({ end: 1234567 });
+  return <span id="counter"/>;
 };
 ```
 
@@ -164,7 +164,9 @@ const SimpleHook = () => {
 import { useCountUp } from 'react-countup';
 
 const CompleteHook = () => {
-  const { countUp, start, pauseResume, reset, update } = useCountUp({
+  const countUpRef = React.useRef(null);
+  const { start, pauseResume, reset, update } = useCountUp({
+    ref: countUpRef,
     start: 0,
     end: 1234567,
     delay: 1000,
@@ -177,7 +179,7 @@ const CompleteHook = () => {
   });
   return (
     <div>
-      <div>{countUp}</div>
+      <div ref={countUpRef}/>
       <button onClick={start}>Start</button>
       <button onClick={reset}>Reset</button>
       <button onClick={pauseResume}>Pause/Resume</button>

index.d.ts

@@ -45,6 +45,7 @@ type EasingFn = (t: number, b: number, c: number, d: number) => number;
 interface CommonProps {
   decimal?: string;
   decimals?: number;
+  delay?: number;
   duration?: number;
   easingFn?: EasingFn;
   end: number;
@@ -58,7 +59,6 @@ interface CommonProps {
 
 export interface CountUpProps extends CommonProps, CallbackProps {
   className?: string;
-  delay?: number;
   redraw?: boolean;
   preserveValue?: boolean;
   children?: (props: RenderCounterProps) => JSX.Element;
@@ -68,7 +68,6 @@ declare class CountUp extends React.Component<CountUpProps, any> {}
 
 export interface useCountUpProps extends CommonProps, CallbackProps {
   startOnMount?: boolean;
-  delay?: number;
 }
 
 type countUpHook = (

jest.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   testEnvironment: 'jsdom',
-  setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
+  transformIgnorePatterns: [
+    "/node_modules/(?!countup\\.js).+\\.js$",
+  ],
 };

package.json

@@ -33,7 +33,7 @@
     "react": ">= 16.3.0"
   },
   "dependencies": {
-    "countup.js": "^1.9.3",
+    "countup.js": "^2.0.7",
     "prop-types": "^15.7.2",
     "warning": "^4.0.3"
   },
@@ -44,7 +44,7 @@
     "@babel/preset-react": "7.14.5",
     "@testing-library/react": "12.0.0",
     "@testing-library/react-hooks": "7.0.1",
-    "babel-jest": "26.6.3",
+    "babel-jest": "27.0.6",
     "jest": "27.0.6",
     "prettier": "2.3.2",
     "pretty-quick": "3.1.1",

src/CountUp.js

@@ -118,7 +118,9 @@ class CountUp extends Component {
     if (this.timeoutId) {
       clearTimeout(this.timeoutId);
     }
-    this.instance.reset();
+    if (this.instance.target) {
+      this.instance.reset();
+    }
   }
 
   createInstance = () => {