Feature: possibility to have a different format when target is reached

[AoDev]

trafficstars

Hello,

Transitioning tons of decimals is not that great for us but we still would like to show them when the transition has finished. So ideally I'd like to have 0 decimals during transitions then final value has some. What do you think?

Thanks for the component by the way : )

[javierbyte]

@AoDev sounds like a good idea. How about customFunctionRender receiving an extra argument to tell if it's currently being animated?

[AoDev]

I think it can work, I am thinking of pros and cons.

If we can provide 2 functions, then it's easier to use the component, since it would stay more "declarative style" and there would be no need to check anything.

From performance point of view (like having many animated numbers), if we can make things in a way that there is no need to check if the transition has finished then it might be a good thing. Just call the "customFinalRender" internally if it was provided, or the customRender / defaultRender.

If we provide 1 function with a parameter, then it's less props to provide to the component but I dont know if it can be optimized the same way than with 2.

[AoDev]

Continuing my comment above, we have different choices.

<NumberEasing
  value={10}
  decimals={0}
  finalRender={(num) => num.toFixed(2)}
  ease="quintInOut"
/>

<NumberEasing
  value={10}
  customRender={(num) => num.toFixed(0)}
  finalRender={(num) => num.toFixed(2)}
  ease="quintInOut"
/>

<NumberEasing
  value={10}
  customRender={(num, final) => final ? num.toFixed(2) : num.toFixed(0)}
  ease="quintInOut"
/>

I guess all are fine but maybe there is one that could take advantage of the internal mechanism of the component if it knows when the final render will occur.

[javierbyte]

hey @AoDev, thank you for detailing those options. I think I like having a single function best:

<NumberEasing
  value={10}
  customRender={(num, final) => final ? num.toFixed(2) : num.toFixed(0)}
  ease="quintInOut"
/>

makes for an easier export of render functions. I don't think there is a performance difference between having them as a single function or separate funcitons.

What do you think? I can add the parameter.

[AoDev]

hello @javierbyte , I just realised I had to answer you (one year ago lol). Yes, it's good to have a final flag in custom render as a solution : )