Floats can be cast to integers with useSpring

[CodyJasonBennett]

🐛 Bug Report

Stringified or literal floats are being cast to integers when they are only significant to one value via useSpring.

To Reproduce

The described problem is immediately visible on mount, with no interpolation being done.

Try interpolating between a float that holds significance to another that does not (defined by default). Then try having react-spring animate back to the latter value — it's then converted to an integer.

Expected behavior

Springs should respect the highest precision and/or keep the output as a float. I'm not sure if the former is a regression, but it isn't a nice pattern to see.

As it's unclear if this behavior is done intentionally, I'm keeping this as a potential bug.

Link to repro (highly encouraged)

Try clicking on the centered number to animate and play around with the values as I outlined above.

Reproduction - Workaround

Environment

• react-spring v9.1.2
• react v17.0.2

[brotzky]

Have the same issue and the workaround you posted works for us. Thanks, @CodyJasonBennett ❤️ .

[joshuaellis]

Just while I work on this, I want to highlight while the workaround is definitely welcome, it will cause react to re-render at the frame-rate of your machine (typically 60fps).

[joshuaellis]

I think that a. the initial render should definitely be 0.00 respecting the value you've passed as a string, and secondly it would be great to respect the precision you set so it would only render with two decimal places since it being a string it might not be too hard... but I can imagine with numbers it might be? 🤔

[olholm]

Are there other workarounds than the useState one? I am interpolating a number and outputting with danish currency locale, meaning that 1500 should render as "1.500 kr.", but instead any render after the transition is done, the animated elements outputs "1.5 kr", which is obviously not good when presenting cost :)

In case my description above is poor, I have created an example here - let the transition finish, and then click the button.