Merge pull request #148 from mmarkelov/Implement_preserveValues_feature

Implement preserveValues feature

README.md

@@ -36,6 +36,7 @@ Click [here](https://github.com/glennreyes/react-countup/tree/d0002932dac8a274f9
       - [`end: number`](#end-number)
       - [`prefix: string`](#prefix-string)
       - [`redraw: boolean`](#redraw-boolean)
+      - [`preserveValue: boolean`](#preservevalue-boolean)
       - [`separator: string`](#separator-string)
       - [`start: number`](#start-number)
       - [`suffix: string`](#suffix-string)
@@ -233,6 +234,12 @@ Forces count up transition on every component update.
 
 Default: `false`
 
+#### `preserveValue: boolean`
+
+Save previously ended number to start every new animation from it.
+
+Default: `false`
+
 #### `separator: string`
 
 Specifies character of thousands separator.

src/CountUp.js

@@ -20,6 +20,7 @@ class CountUp extends Component {
     suffix: PropTypes.string,
     style: PropTypes.object,
     useEasing: PropTypes.bool,
+    preserveValue: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -41,6 +42,7 @@ class CountUp extends Component {
     suffix: '',
     style: undefined,
     useEasing: true,
+    preserveValue: false,
   };
 
   componentDidMount() {
@@ -78,7 +80,9 @@ class CountUp extends Component {
     // Only end value has changed, so reset and and re-animate with the updated
     // end value.
     if (this.props.end !== prevProps.end) {
-      this.instance.reset();
+      if (!this.props.preserveValue) {
+        this.instance.reset();
+      }
       this.instance.update(this.props.end);
     }
   }
@@ -96,7 +100,7 @@ class CountUp extends Component {
       warning(
         this.containerRef.current &&
           (this.containerRef.current instanceof HTMLElement ||
-          this.containerRef.current instanceof SVGTextElement),
+            this.containerRef.current instanceof SVGTextElement),
         `Couldn't find attached element to hook the CountUp instance into! Try to attach "containerRef" from the render prop to a an HTMLElement, eg. <span ref={containerRef} />.`,
       );
     }

src/__tests__/CountUp.test.js

@@ -78,6 +78,14 @@ it('renders with autostart correctly', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('does not reset if preserveValue is true', () => {
+  const { container, rerender } = render(<CountUp end={10} preserveValue />);
+
+  rerender(<CountUp end={20} preserveValue />);
+
+  expect(container).toMatchSnapshot();
+});
+
 it('calls start correctly', () => {
   const spy = {};
 

src/__tests__/__snapshots__/CountUp.test.js.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`does not reset if preserveValue is true 1`] = `
+<div>
+  <span>
+    0
+  </span>
+</div>
+`;
+
 exports[`re-renders change of duration value correctly 1`] = `
 <div>
   <span>