2

When i use FormattedNumber from react-intl to format currency, it won't format negative currency amount to have parenthesis around the currency in chrome.

It does work in Internet Explorer but does not work in Chrome and Mozilla Firefox.

<FormattedNumber  
                        style='currency'
                        currency='USD'
                        minimumFractionDigits={2}
                        maximumFractionDigits={2}
                        value={-100.100}/>

Output in IE -> ($100.10)

Output in Chrome-> -$100.10

Is there any option to get ($100.10) in Chrome/Firefox.

Dhiraj
  • 1,430
  • 11
  • 21

1 Answers1

1

react-intl uses Intl.NumberFormat under the hood. That has a currencySign option, which can be standard or accounting. Set it to accounting to use parentheses for negative values. Using the FormattedNumber component:

<FormattedNumber  
  style='currency'
  currency='USD'
  currencySign='accounting'
  minimumFractionDigits={2}
  maximumFractionDigits={2}
  value={-100.100}
/>
mscottmoore
  • 11
  • 3