javascriptreactjs

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 incorporate a hook into my broader React component.

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


Solution

  • Try adding preserveValue={true}

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

    Documentation