Error with separator and negative numbers

[brammitch]

<CountUp
  className="count"
  duration={2}
  end={value}
  separator=","
  useGrouping={true}
/>

Some of the values we use with react-countup are negative and it appears that the minus sign is being interpreted as a digit in the number. When the minus sign appears in front of a 3 or 6 digit number, the separator is placed behind the minus sign, as though the minus sign were in the thousands or millions place value.

Here are four examples of how this has shown up in our app:

• Correct behaviors

  
  // Result: -95
  // Expected: -95

// Result: -22,688 // Expected: -22,688

- Incorrect behaviors

// Result: -,111 // Expected: -111

// Result: -,178,238 // Expected: -178,238

react@15.6.1 react-countup@2.2.0

[glennreyes]

Seems like it's a bug at countUp.js. Can you file this issue there?

[brammitch]

Thanks @glennreyes - I opened issue #190 there.

Here's the current workaround we're using, in case anyone else runs across this problem:

<CountUp
  className="count"
  duration={2}
  end={value < 0 ? value * -1 : value}
  prefix={value < 0 ? '-' : null}
  separator=","
  useGrouping={true}
/>

[glennreyes]

Awesome, thanks! Will bump as soon this has been released. Workaround looks great! 👍

[brammitch]

Fixed in countUp.js 1.9.3

[glennreyes]

Cool! Bumping didn't help, so I copy/pasted the fix by hand: https://github.com/glennreyes/react-countup/commit/4c468f80cdbe08de6b9477c843b23a9e7ab9b4fb

Should be all good now with 3.0.2 👍