web-dev-qa-db-fra.com

Réagissez Intl FormattedNumber avec le symbole monétaire avant, pas après

J'utilise FormattedNumber de React Intl dans un grand projet React capable de prendre en charge de nombreuses langues.

Voici un composant devise que j'ai créé afin de pouvoir facilement insérer une devise formatée dans mes vues:

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;

Le composant fonctionne très bien. Et cela fonctionne comme prévu. En anglais - lorsque currency est GBP - un montant est formaté de la manière suivante:

£4.00

En allemand - lorsque currency est EUR - son format est le suivant:

4,00€

Cependant, je dois formater le montant différemment dans un cas particulier. Donc, ce que je recherche, c’est l’euro qui précède le montant, comme suit:

€4,00

Est-ce possible avec FormattedNumber? Je ne veux pas avoir à reformater manuellement le nombre formaté si je peux l'éviter.

reactjsinternationalization
8
alanbuchanan

Vous pouvez envelopper votre FormattedNumber avec un composant IntlProvider avec les propriétés locales appropriées, comme ceci:

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

Peut-être que le fichier 'en' n'est pas toujours le bon, car il utilisera un point au lieu d'une virgule, mais vous pouvez rechercher un paramètre régional ( voir ici ) qui fournit le format correct ou simplement en écrire un vous-même. (pour rester simple en copiant les paramètres régionaux et en remplaçant le point par la virgule dans la ligne respective).

7
Maxim Zubarev

Vous pouvez spécifier un format personnalisé, nommé, via la propriété formats sur <IntlProvider>. Il y a aussi defaultFormats qui sont utilisés avec defaultLocale dans le cas de repli, parce que formats pourrait dépendre de locale. Voici un exemple avec <FormattedMessage> et <FormattedNumber> utilisant un format de nom nommé personnalisé 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>
0
Orhan