Some improvements (#517)

package.json

@@ -20,7 +20,8 @@
   "homepage": "https://react-countup.now.sh",
   "main": "build",
   "files": [
-    "build"
+    "build/index.js",
+    "build/index.d.ts"
   ],
   "typings": "build/index.d.ts",
   "scripts": {

src/CountUp.tsx

@@ -1,6 +1,6 @@
 import React, { Component, CSSProperties } from 'react';
 import warning from 'warning';
-import { createCountUpInstance } from './common';
+import { createCountUpInstance, DEFAULTS } from './common';
 import { CountUp as CountUpJs } from 'countup.js';
 import { CallbackProps, CommonProps, RenderCounterProps } from './types';
 
@@ -17,25 +17,9 @@ class CountUp extends Component<CountUpProps> {
   private timeoutId: ReturnType<typeof setTimeout> | undefined;
 
   static defaultProps = {
-    decimal: '.',
-    decimals: 0,
-    delay: null,
-    duration: null,
-    easingFn: null,
-    formattingFn: null,
-    onEnd: () => {},
-    onPauseResume: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    onUpdate: () => {},
-    prefix: '',
+    ...DEFAULTS,
     redraw: false,
-    separator: '',
-    start: 0,
-    startOnMount: true,
-    suffix: '',
     style: undefined,
-    useEasing: true,
     preserveValue: false,
   };
 

src/__tests__/CountUp.test.js

@@ -139,18 +139,6 @@ describe('CountUp component', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders with delay as a render prop component correctly', () => {
-    console.error = jest.fn();
-
-    const { container } = render(
-      <CountUp delay={1} end={10}>
-        {({ countUpRef }) => <rect ref={countUpRef}/>}
-      </CountUp>,
-    );
-
-    expect(console.error).toHaveBeenCalled();
-  });
-
   it('renders as a render prop component correctly', () => {
     const { container } = render(
       <CountUp end={10}>{({ countUpRef }) => <div ref={countUpRef}/>}</CountUp>,

src/__tests__/useCountUp.test.js

@@ -106,6 +106,24 @@ describe('useCountUp', () => {
     expect(span.textContent).toEqual('0');
   });
 
+  it('calls onEnd correctly', async () => {
+    let startFn;
+    const onEnd = jest.fn();
+    const Hook = () => {
+      const { start } = useCountUp({ end: 10, duration: 1, onEnd, startOnMount: false, ref: "counter" });
+      startFn = start;
+      return <span id="counter"/>;
+    };
+
+    const { container } = render(<Hook/>);
+    act(() => {
+      startFn();
+    })
+
+    await checkContent(container, '10');
+    expect(onEnd).toHaveBeenCalled();
+  });
+
   it('calls update correctly', async () => {
     let updateFn;
     const onUpdate = jest.fn();

src/common.ts

@@ -2,6 +2,14 @@ import { CountUp } from 'countup.js';
 import { CountUpProps } from './CountUp';
 import { useCountUpProps } from './useCountUp';
 
+export const DEFAULTS = {
+  decimal: '.',
+  delay: null,
+  prefix: '',
+  suffix: '',
+  start: 0
+}
+
 export const createCountUpInstance = (el: string | HTMLElement | HTMLInputElement, props: useCountUpProps | CountUpProps) => {
   const {
     decimal,

src/useCountUp.ts

@@ -1,6 +1,6 @@
 import { CallbackProps, CommonProps, UpdateFn } from './types';
-import { useEffect, useRef } from 'react';
-import { createCountUpInstance } from './common';
+import React, { useEffect, useRef } from 'react';
+import { createCountUpInstance, DEFAULTS } from './common';
 import { CountUp as CountUpJs } from 'countup.js';
 
 export interface useCountUpProps extends CommonProps, CallbackProps {
@@ -9,20 +9,8 @@ export interface useCountUpProps extends CommonProps, CallbackProps {
 }
 
 const defaults: Partial<useCountUpProps> = {
-  decimal: '.',
-  decimals: 0,
-  delay: null,
-  onEnd: () => {},
-  onPauseResume: () => {},
-  onReset: () => {},
-  onStart: () => {},
-  onUpdate: () => {},
-  prefix: '',
-  separator: '',
-  start: 0,
+  ...DEFAULTS,
   startOnMount: true,
-  suffix: '',
-  useEasing: true,
 };
 
 const useCountUp = (props: useCountUpProps) => {
@@ -53,10 +41,10 @@ const useCountUp = (props: useCountUpProps) => {
   const restart = () => {
     const { onStart, onEnd } = parsedProps;
     getCountUp().reset();
+    onStart?.({ pauseResume, reset, update });
     getCountUp().start(() => {
       onEnd?.({ pauseResume, reset, start: restart, update });
     });
-    onStart?.({ pauseResume, reset, update });
   };
 
   const pauseResume = () => {