React Intl FormattedNumber with the currency symbol before, not after
You can specify a custom, named formats via the formats
prop on <IntlProvider>
. There's also defaultFormats
which are used with the defaultLocale
in the fallback case because the formats
might be dependent on the locale
. Here's an example with <FormattedMessage>
and <FormattedNumber>
using a custom named number format USD
:
const formats = {
number: {
TRY: {
style: 'currency',
currency: 'TRY'
},
USD: {
style: 'currency',
currency: 'USD'
}
}
};
<IntlProvider locale='en' messages={{
price: 'This product costs {price, number, USD}'
}}
formats={formats}
defaultFormats={formats}
>
<FormattedMessage id={'price'} values={{price: 1000}}/>
<FormattedNumber value={1000} format='USD'/>
</IntlProvider>
You could wrap your FormattedNumber
with an IntlProvider
component with the appropriate locale prop, like this:
<IntlProvider locale='en'>
<FormattedNumber
value={props.amount}
style="currency"
currency={props.currency} />
</IntlProvider>
Maybe the 'en' file isn't still the right, cause it will use a period instead of a comma, but you can either look for a locale (see here) that provides the correct format or just write one yourself (to stay simple by copying the en locale and replacing the period with the comma in the respective line).