Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I get React CountUp to count from a previous number?

I am new to React and am using the React CountUp to animate a number counting up, eg:

<CountUp end={totalAmount} />

This works – whenever totalAmount is changed CountUp will animate a count from 0 to whatever the new number is.

However, I want to animate it to count from whatever the previous number was. For example if the totalAmount changes from 70 to 100 I want the animate just to count from 70. As it is now, whatever totalAmount changes to it will always start at 0.

I see there is an update prop available, but I am unsure how to use it. I have tried:

<CountUp end={totalAmount} update={totalAmount} />

I see there is a way to do this in a "hook", but to be honest have no idea how to incporporate a hook into my broader React component.

Would anyone be able to point me in the right direction at all?

Tags:

2

Answers


  1. 0

    Try

    <CountUp end={totalAmount} preserveValue={true}/>

    Document

    Login or Signup to reply.
  2. 0

    Use preserveValue boolean flag. It stores the previously ended number to start new animation from it.
    Check Npm Link

    <CountUp preserveValue={true} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search