Fix undefined properties for wrapped components (#785)

src/__tests__/CountUp.test.js

@@ -225,6 +225,23 @@ describe('CountUp component', () => {
     }, 1000);
   });
 
+  it('applies default params for wrapped component', (done) => {
+    const WrappedCountUp = ({ prefix, suffix }) => (
+      <CountUp start={0} end={100} duration={1} prefix={prefix} suffix={suffix} />
+    );
+
+    const { container } = render(
+      <WrappedCountUp />,
+    );
+
+    setTimeout(() => {
+      const span = container.firstChild;
+      expect(span.textContent).toEqual('100');
+      done();
+    }, 1000);
+
+  })
+
   it('calls start correctly', () => {
     const spy = {};
 

src/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["es2019", "dom"],
     /* Basic Options */
     "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */,

src/useCountUp.ts

@@ -1,10 +1,10 @@
-import { CallbackProps, CommonProps, CountUpApi, UpdateFn } from './types';
+import { CallbackProps, CommonProps, CountUpApi, CountUpInstanceProps, UpdateFn } from "./types";
 import React, { useMemo, useRef, useEffect } from 'react';
 import { createCountUpInstance } from './common';
 import { useEventCallback } from './helpers/useEventCallback';
 import { CountUp as CountUpJs } from 'countup.js';
 
-export interface useCountUpProps extends CommonProps, CallbackProps {
+export interface UseCountUpProps extends CommonProps, CallbackProps {
   startOnMount?: boolean;
   ref: string | React.RefObject<HTMLElement>;
   enableReinitialize?: boolean;
@@ -26,7 +26,10 @@ const DEFAULTS = {
   useIndianSeparators: false,
 };
 
-const useCountUp = (props: useCountUpProps): CountUpApi => {
+const useCountUp = (props: UseCountUpProps): CountUpApi => {
+  const filteredProps: Partial<UseCountUpProps> = Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined)
+  );
   const {
     ref,
     startOnMount,
@@ -38,16 +41,17 @@ const useCountUp = (props: useCountUpProps): CountUpApi => {
     onReset,
     onUpdate,
     ...instanceProps
-  } = useMemo(() => ({ ...DEFAULTS, ...props }), [props]);
+  } = useMemo(() => ({ ...DEFAULTS, ...filteredProps }), [props]);
 
   const countUpRef = useRef<CountUpJs>();
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
   const isInitializedRef = useRef(false);
 
   const createInstance = useEventCallback(() => {
     return createCountUpInstance(
-      typeof ref === 'string' ? ref : ref.current!,
-      instanceProps,
+      typeof ref === 'string' ? ref : ref!.current!,
+      instanceProps as CountUpInstanceProps
+      ,
     );
   });