From 02dc4e16c2d89af5aed3e1ca20c7091de2d974d5 Mon Sep 17 00:00:00 2001
From: Maksim Markelov <maks-markel@mail.ru>
Date: Sat, 11 Mar 2023 19:02:30 +0300
Subject: [PATCH] Fix undefined properties for wrapped components (#785)

---
 src/__tests__/CountUp.test.js | 17 +++++++++++++++++
 src/tsconfig.json             |  1 +
 src/useCountUp.ts             | 16 ++++++++++------
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/CountUp.test.js b/src/__tests__/CountUp.test.js
index 3a660eb9..cfe6c393 100644
--- a/src/__tests__/CountUp.test.js
+++ b/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 = {};
 
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 5cca09a6..b7a18540 100644
--- a/src/tsconfig.json
+++ b/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'. */,
diff --git a/src/useCountUp.ts b/src/useCountUp.ts
index 73207052..174662b3 100644
--- a/src/useCountUp.ts
+++ b/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,7 +41,7 @@ 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>>();
@@ -46,8 +49,9 @@ const useCountUp = (props: useCountUpProps): CountUpApi => {
 
   const createInstance = useEventCallback(() => {
     return createCountUpInstance(
-      typeof ref === 'string' ? ref : ref.current!,
-      instanceProps,
+      typeof ref === 'string' ? ref : ref!.current!,
+      instanceProps as CountUpInstanceProps
+      ,
     );
   });