A combination of formatjs & javascript's native Intl.NumberFormat()
supports formatting of numbers as currency in various cultures and units. But how can I format a range of currency as $1,000.00 - 5000.00
.
Without repeating the symbol, where ever and however it is normally displayed?
Using react-intl
:
<FormattedNumber value={minVal} style="currency" currency="USD" />
- <FormattedNumber value={maxVal} style="currency" currency="USD" />
This will show $1,000.00 - $5000.00
which does not match my design spec. Stripping away the currency symbol off of the second value seems like a hackey strategy since I shouldn't/can't easily know the symbol to strip.
Formatting just as a regular decimal would be strictly incorrect - currency rules dictate different numbers of digits for the "minor units" depending on the currency.
And what about if the currency symbol is, I don't know, displayed at the end for the culture instead of at the beginning? (Does that happen?)