Interpolation de variable

Il est assez fréquent de créer des chaînes qui contiennent des variables.

Dénomination des variables

Utilisez des noms simples au format « camelCased ». N'utilisez pas de traits d'union ni de traits de soulignement.

JS/JSX

Exemple simple

MyComponent.messages.js :

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  helloWorld: {
    id: 'appName.component.id',
    defaultMessage: 'Hello {someVar}.',
  },
});

Ensuite, vous pouvez interpoler la valeur, si vous le souhaitez :

import { useTranslator } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useTranslator();
    return (
        <div>
            {translator(messages.helloWorld, { someVar: "world" })
        </div>
    );
};

Résultat :

Bonjour, monde

Un exemple plus réaliste

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  premiumDue: {
    id: 'appName.component.id',
    defaultMessage: 'Your premium of {someAmount} is due on {someDate}.',
  },
});

Vous pouvez ensuite interpoler des valeurs correctement formatées. Voici comment faire, entre autres :

import { formatDate, formatCurrency } from '@jutro/components';
import { useTranslator, useIntl } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useTranslator();
    const intl = useIntl();
    return (
        <div>
            {translator(messages.premiumDue, {
                someAmount: formatCurrency(intl, {
                    amount: 4324.34,
                    currency: 'usd',
                }),
                someDate: formatDate(intl, {
                    value: '2020-03-04',
                    displayFormat: 'long',
                }),
            })}
        </div>
    );
};

Les variables contenant des éléments comme des dates, des heures et des nombres doivent être formatées en fonction des paramètres régionaux de l'utilisateur. (La langue choisie par l'utilisateur n'a pas besoin d'être la même que ses paramètres régionaux. Bien qu'il soit peu probable qu'un utilisateur choisisse cette option, l'architecture la prend en charge).

La sortie générée par le code ci-dessus est présentée ci-dessous, avec la langue et les paramètres régionaux définis sur en-US :

Votre prime de 4 324,34 $ doit être réglée le 4 mars 2020.

Transmission d'arguments à des propriétés traduisibles

Pour transmettre des arguments à une propriété de type intlMessageShape, utilisez le champ args dans l'objet. La traduction sera assurée par le composant à l'aide du crochet useTranslator.

Prenons le composant Link. Le texte du lien lui-même est traduisible, mais vous pouvez également interpoler un argument dans le texte du lien. Voici comment procéder :

overdueAmount: {
    id: 'myapp.mycomponent.paymentOverdue',
    defaultMessage: 'A payment of {someAmount} is overdue!',
    description: 'A really good description',
},

Vous pouvez transmettre une valeur pour someAmount comme ceci :

...
import messages from './MyComponent.messages';
...
export default () => {
    return (
        <Link to="/make-a-payment"
            children={{
                ...messages.overdueAmount,
                args: {
                    someAmount: formatCurrency(intl, {amount: 4223.34, currency: 'usd'}),
                },
            }},
        />
    );
};

La sortie pour la langue et les paramètres régionaux est définie sur en-US. Apparaîtra sous la forme d'un lien :

La date d'échéance d'un paiement de 4 223,34 $ est dépassée !

Limites actuelles

Dans l'état actuel des choses, vous pouvez uniquement remplacer componentProps. Il n'est donc pas possible d'interpoler des variables dans des chaînes qui ne font pas partie de l'élément componentProps d'un composant. Cela s'applique par exemple au texte des composants Button, entre autres.