javascript - Animate-up number with thousand separators

Question

When using react-spring to animate-up a number from 0 to x, is it possible to display that number with commas as "thousand separators" (as described here)?

The goal is to display this number as "123,456" - while still animating it up nicely!

const x = 123456; 

Basic react-spring number animation:

<Spring
    from={{
        number: 0,
    }}
    to={{
        number: x,
    }}
    config={{
        duration: 500
    }}
>
    {props => (
        <div>
            {props.number?.toFixed()}
        </div>
    )}
</Spring>

question from:https://stackoverflow.com/questions/66064173/animate-up-number-with-thousand-separators

Answer 1

Use this:

{new Intl.NumberFormat().format(Math.round(props.number)}

The NumberFormat() from the Intl API will provide the commas for you where they belong.

Reference