diff --git a/README.md b/README.md index 85dbd980..c3ba9775 100644 --- a/README.md +++ b/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
{countUp}
; + useCountUp({ end: 1234567 }); + return ; }; ``` @@ -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 (
-
{countUp}
+
diff --git a/.babelrc b/babel.config.json similarity index 100% rename from .babelrc rename to babel.config.json diff --git a/index.d.ts b/index.d.ts index a3f99010..6f6f069d 100644 --- a/index.d.ts +++ b/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 {} export interface useCountUpProps extends CommonProps, CallbackProps { startOnMount?: boolean; - delay?: number; } type countUpHook = ( diff --git a/jest.config.js b/jest.config.js index 2b416829..d7041540 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,7 @@ module.exports = { testEnvironment: 'jsdom', - setupFiles: ['raf/polyfill'], testURL: 'http://localhost', + transformIgnorePatterns: [ + "/node_modules/(?!countup\\.js).+\\.js$", + ], }; diff --git a/package.json b/package.json index 9cc18c09..784565c0 100644 --- a/package.json +++ b/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", diff --git a/src/CountUp.js b/src/CountUp.js index fb42bfc9..cd9515f3 100644 --- a/src/CountUp.js +++ b/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 = () => { diff --git a/src/__tests__/CountUp.test.js b/src/__tests__/CountUp.test.js index ee2e504c..f34a97a1 100644 --- a/src/__tests__/CountUp.test.js +++ b/src/__tests__/CountUp.test.js @@ -1,317 +1,317 @@ -'use strict'; - import React from 'react'; import { cleanup, fireEvent, render } from '@testing-library/react'; import CountUp from '../index'; afterEach(cleanup); -it('renders start value correctly', () => { - const { container } = render(); - - expect(container).toMatchSnapshot(); -}); - -it('re-renders change of start value correctly', () => { - const { container, rerender } = render(); - - rerender(); - - expect(container).toMatchSnapshot(); -}); - -it('re-renders change of duration value correctly', () => { - const { container, rerender } = render(); - - rerender(); - - expect(container).toMatchSnapshot(); -}); - -it('clear previous counter when duration changed', (done) => { - const { container, rerender } = render(); - - rerender(); - - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('10'); - done(); - }, 1200); -}); - -it('re-renders when suffix changes', (done) => { - const { container, rerender } = render( - , - ); - - rerender(); - - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('30 seconds'); - done(); - }, 1200); -}); - -it('re-renders when the separator changes', (done) => { - const { container, rerender } = render( - , - ); - - rerender(); - - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('3 000'); - done(); - }, 1200); -}); - -it('re-renders when the decimals changes', (done) => { - const { container, rerender } = render( - , - ); - - rerender(); - - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('10.5'); - done(); - }, 1200); -}); +describe('CountUp component', () => { + it('renders start value correctly', () => { + const { container } = render(); -it('re-renders when the decimal changes', (done) => { - const { container, rerender } = render(); + expect(container).toMatchSnapshot(); + }); - rerender(); + it('re-renders change of start value correctly', () => { + const { container, rerender } = render(); - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('10.5'); - done(); - }, 1200); -}); + rerender(); -it('re-renders when the prefix changes', (done) => { - const { container, rerender } = render( - , - ); + expect(container).toMatchSnapshot(); + }); - rerender(); + it('re-renders change of duration value correctly', () => { + const { container, rerender } = render(); - setTimeout(() => { - const span = container.firstChild; - expect(span.textContent).toEqual('->30'); - done(); - }, 1200); -}); + rerender(); -it('re-renders change of end value correctly', () => { - const { container, rerender } = render(); + expect(container).toMatchSnapshot(); + }); - rerender(); + it('clear previous counter when duration changed', (done) => { + const { container, rerender } = render(); - expect(container).toMatchSnapshot(); -}); + rerender(); -it('re-renders with redraw={false} correctly', () => { - const { container, rerender } = render(); + setTimeout(() => { + const span = container.firstChild; + expect(span.textContent).toEqual('10'); + done(); + }, 1200); + }); - rerender(); + it('re-renders when suffix changes', (done) => { + const { container, rerender } = render( + , + ); - expect(container).toMatchSnapshot(); -}); + rerender(); -it('renders with delay correctly', () => { - const { container } = render(); + setTimeout(() => { + const span = container.firstChild; + expect(span.textContent).toEqual('30 sec'); + done(); + }, 1200); + }); - expect(container).toMatchSnapshot(); -}); + it('re-renders when the separator changes', (done) => { + const { container, rerender } = render( + , + ); -it('renders with delay as a render prop component correctly', () => { - const { container } = render( - - {({ countUpRef }) =>
} - , - ); + rerender(); - expect(container).toMatchSnapshot(); -}); - -it('renders with delay as a render prop component correctly', () => { - console.error = jest.fn(); + setTimeout(() => { + const span = container.firstChild; + expect(span.textContent).toEqual('3 000'); + done(); + }, 1200); + }); - const { container } = render( - - {({ countUpRef }) => } - , - ); + it('re-renders when the decimals changes', (done) => { + const { container, rerender } = render( + , + ); - expect(console.error).toHaveBeenCalled(); -}); + rerender(); -it('renders as a render prop component correctly', () => { - const { container } = render( - {({ countUpRef }) =>
}, - ); + setTimeout(() => { + const span = container.firstChild; + expect(span.textContent).toEqual('10.5'); + done(); + }, 1200); + }); - expect(container).toMatchSnapshot(); -}); + it('re-renders when the decimal changes', (done) => { + const { container, rerender } = render(); -it('renders with autostart correctly', () => { - const { container } = render( - - {({ countUpRef }) =>
} - , - ); + rerender(); - expect(container).toMatchSnapshot(); -}); - -it('re-renders with redraw={true} correctly', () => { - const componentRender = jest.spyOn(CountUp.prototype, 'render'); - const { rerender } = render(); - - rerender(); - expect(componentRender).toHaveBeenCalledTimes(2); -}); - -it('does not reset if preserveValue is true', (done) => { - const { container, rerender } = render( - , - ); - - setTimeout(() => { - rerender(); - const span = container.firstChild; - expect(span.textContent).toEqual('10'); - done(); - }, 1000); -}); - -it('does not reset if preserveValue is true and suffix is set', (done) => { - const { container, rerender } = render( - , - ); - - setTimeout(() => { - rerender(); - const span = container.firstChild; - expect(span.textContent).toEqual('10%'); - done(); - }, 1000); -}); - -it('does not reset if preserveValue is true and prefix is set', (done) => { - const { container, rerender } = render( - , - ); - - setTimeout(() => { - rerender(); - const span = container.firstChild; - expect(span.textContent).toEqual('->10'); - done(); - }, 1000); -}); - -it('calls start correctly', () => { - const spy = {}; - - const { container } = render( - - {({ countUpRef, start }) => { - spy.start = start; - jest.spyOn(spy, 'start'); - return