React Intl FormattedNumber with currency symbol before, not after

Question

I am using FormattedNumber from React Intl in a large React project that has the ability for different languages.

Here is the currency component I made so that I can easily insert a formatted currency into my views:

import {FormattedNumber} from 'react-intl'; const Currency = (props) => { const currency = props.currency; const minimum = props.minimumFractionDigits || 2; const maximum = props.maximumFractionDigits || 2; return <FormattedNumber value={props.amount} style="currency" currency={currency} minimumFractionDigits={minimum} maximumFractionDigits={maximum} />; }; export default Currency; 

The component works great. And it works as expected. In English - when currency is GBP - the amount is formatted as such:

 £4.00 

In German - when currency is EUR - it is formatted as such:

 4,00€ 

However, I need to format the amount differently in a particular case. So, what I'm looking for is Euro, expecting up to the amount, for example:

 €4,00 

Is this possible with FormattedNumber? I do not want to manually reformat the formatted number if I can avoid it.

Answer 1

You can wrap your FormattedNumber with an FormattedNumber component with appropriate locale support, for example:

 <IntlProvider locale='en'> <FormattedNumber value={props.amount} style="currency" currency={props.currency} /> </IntlProvider> 

Maybe the file 'en' is not right yet, because 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 it yourself (to stay simple by copying en locale and replacing the period with a comma in the corresponding line).