alanbuchanan alanbuchanan - 2 months ago 16
React JSX Question

React Intl FormattedNumber with the currency symbol before, not after

I am using FormattedNumber from React Intl in a big React project that has the capability for many different languages.

Here is a 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
- an amount is formatted as such:

£4.00


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

4,00€


However, I need to format the amount differently in a particular case. So, what I'm looking for is the Euro coming before the amount, like so:

€4,00


Is this possible with FormattedNumber? I don't want to have to manually reformat the formatted number if I can avoid it.

Answer

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).

Comments