Comment ajouter une traduction à une application React à l’aide de Format.js

Dans cet article, découvrez comment utiliser Format.js pour ajouter des traductions à une application React.

Une chose que nous devons souvent faire dans nos applications React est d’ajouter du texte dans plusieurs langues dans notre application.

Nous pouvons utiliser des bibliothèques conçues pour React pour faciliter cela. Dans cet article, nous verrons comment utiliser Format.js pour ajouter des traductions à notre application React.

Commencer

Pour commencer, nous installons le react-intl bibliothèque, en exécutant :

npm i -S react-intl

Ensuite, nous pouvons l’utiliser immédiatement.

Pour ajouter quelques traductions et les afficher, nous écrivons quelque chose comme :

import { useState } from "react";
import { IntlProvider, FormattedMessage, FormattedNumber } from "react-intl";

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}"
};

const messagesInEnglish = {
  myMessage: "Today is {ts, date, ::yyyyMMdd}"
};

export default function App() {
  const [locale, setLocale] = useState("fr");
  return (
    <>
      <button onClick={() => setLocale((l) => (l === "en" ? "fr" : "en"))}>
        toggle language
      </button>
      <IntlProvider
        messages={locale === "en" ? messagesInEnglish : messagesInFrench}
        locale={locale}
        defaultLocale="en"
      >
        <p>
          <FormattedMessage
            id="myMessage"
            defaultMessage="Today is {ts, date, ::yyyyMMdd}"
            values={{ ts: Date.now() }}
          />
        </p>
        <p>
          <FormattedNumber value={100} style="currency" currency="GBP" />
        </p>
      </IntlProvider>
    </>
  );
}

Nous avons messagesInFrench avec le texte français et messagesInEnglish avec le texte anglais. Puis on ajoute le locale indiquez-le pour que nous puissions basculer entre l’anglais et le français avec le bouton.

Nous passons dans le locale comme la valeur du locale accessoire de IntlProvider pour définir les paramètres régionaux de l’application. Et puis nous définissons le messages prop à l’ensemble de texte que nous voulons afficher en fonction du locale valeur.

Pour ajouter un message, nous utilisons le FormattedMessage composant.

Le id prop est la clé du texte que nous voulons afficher dans messagesInFrench ou messagesInEnglish.

defaultMessage est le message de secours que nous affichons si la clé n’est pas trouvée dans l’objet que nous avons défini comme valeur du messages soutenir.

Le values prop nous permet d’interpoler les valeurs entre accolades dans les chaînes de message.

Le FormattedNumber Le composant nous permet d’afficher des nombres formatés pour les paramètres régionaux actuels.

Nous fixons le value prop au numéro que nous voulons afficher. Le style prop est réglé sur 'currency' nous formatons donc l’affichage du nombre dans la devise spécifiée par le currency soutenir.

La manière dont il sera formaté sera effectuée en fonction des paramètres régionaux définis.

Formatage des messages

Nous pouvons également formater les messages pour une utilisation ultérieure dans nos composants React.

Ceci est pratique pour restituer le texte traduit sous forme de chaînes pouvant être utilisées n’importe où.

Pour ce faire, nous pouvons utiliser le intl.formatMessage méthode.

Par exemple, nous écrivons :

import { useState } from "react";
import { IntlProvider, useIntl } from "react-intl";

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}"
};

const messagesInEnglish = {
  myMessage: "Today is {ts, date, ::yyyyMMdd}"
};

const Message = () => {
  const intl = useIntl();
  const message = intl.formatMessage(
    { id: "myMessage" },
    {
      ts: Date.now()
    }
  );
  return <p>{message}</p>;
};

export default function App() {
  const [locale, setLocale] = useState("fr");

  return (
    <>
      <button onClick={() => setLocale((l) => (l === "en" ? "fr" : "en"))}>
        toggle language
      </button>
      <IntlProvider
        messages={locale === "en" ? messagesInEnglish : messagesInFrench}
        locale={locale}
        defaultLocale="en"
      >
        <Message />
      </IntlProvider>
    </>
  );
}

pour créer le Message composant et utilisez-le dans notre App composant.

Dans le Message composant, nous utilisons le useIntl crochet pour retourner le intl objet.

intl a la formatMessage méthode que nous pouvons utiliser pour renvoyer le texte traduit que nous voulons sous forme de chaîne.

Le premier argument est un objet avec le id propriété. id est la clé du message que nous voulons restituer comme dans le premier exemple.

Le deuxième argument contient les valeurs que nous interpolons dans la chaîne, ce qui correspond à ce que nous voulons transmettre dans le FormattedMessage Composants value soutenir.

Ensuite, nous rendons le retour message chaîne.

Maintenant, quand nous basculons le localenous voyons le message anglais et français avec la date interpolée.

Si nous avons beaucoup de traductions, nous devons les extraire dans des fichiers séparés et les importer dans notre application.

Nous pouvons les stocker au format JSON. Par exemple, nous pouvons extraire les messages dans des fichiers JSON en écrivant :

en.json

{
  "myMessage": "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}"
}

fr.json

{
  "myMessage": "Today is {ts, date, ::yyyyMMdd}"
}

Ensuite, nous pouvons les importer et les utiliser en écrivant :

import { useCallback, useEffect, useState } from "react";
import { IntlProvider, FormattedMessage } from "react-intl";

const loadLocaleData = (locale) => {
  switch (locale) {
    case "fr":
      return import("./fr.json");
    default:
      return import("./en.json");
  }
};

export default function App() {
  const [locale, setLocale] = useState("fr");
  const [messages, setMessages] = useState();

  const loadMessages = useCallback(async () => {
    const loadedMessages = await loadLocaleData(locale);
    setMessages(loadedMessages);
  }, [setMessages, locale]);

  useEffect(() => {
    loadMessages();
  }, [loadMessages, locale]);

  return (
    <>
      <button onClick={() => setLocale((l) => (l === "en" ? "fr" : "en"))}>
        toggle language
      </button>
      {messages && (
        <IntlProvider messages={messages} locale={locale} defaultLocale="en">
          <p>
            <FormattedMessage id="myMessage" values={{ ts: Date.now() }} />
          </p>
        </IntlProvider>
      )}
    </>
  );
}

Nous définissons le loadLocaleData fonction pour charger dynamiquement les fichiers JSON de traduction avec le import fonction. Il renvoie une promesse avec les fichiers sous forme d’objets JavaScript.

Par conséquent, pour l’utiliser dans le App composant, nous définissons le loadMessages fonction. Dans la fonction, on appelle loadLocaleData le locale et utilise await pour renvoyer l’objet de message de traduction.

Ensuite, nous appelons setMessgaes avec loadedMessages mettre en place messages aux objets de traduction que nous utilisons comme valeur du message accessoire de IntlProvider.

Ensuite, nous appelons useEffect avec un rappel qui appelle loadMessages pour charger les messages de traduction.

Enfin, nous vérifions si messages est défini avant le rendu IntlProvider pour que nous ayons toujours les messages avant de rendre quoi que ce soit.

Et nous FormattedMessages comme d’habitude pour restituer le message traduit.

Les importations dynamiques sont plus efficaces puisque l’importation est effectuée de manière asynchrone en arrière-plan plutôt que d’importer l’intégralité du JSON de manière synchrone. Cela améliorera les performances si nous avons beaucoup de messages.

Conclusion

Une chose que nous devons souvent faire dans nos applications React est d’ajouter du texte dans plusieurs langues dans notre application.

Format.js nous permet d’ajouter facilement des traductions à notre application React. Nous pouvons l’utiliser pour restituer dynamiquement les messages traduits et également formater le texte dépendant des paramètres régionaux.