Comment utiliser React Intl pour internationaliser vos applications React

0 Partages

React Intl est une bibliothèque populaire qui fournit un ensemble de composants et d’utilitaires pour internationaliser les applications React. L’internationalisation, également appelée i18n, est le processus d’adaptation d’une application à différentes langues et cultures.

Vous pouvez facilement prendre en charge plusieurs langues et paramètres régionaux dans votre application React avec ReactIntl.

Table des matières

Installation de React International

Pour utiliser la bibliothèque React Intl, vous devez d’abord l’installer. Vous pouvez le faire avec plusieurs gestionnaires de paquets : npm, yarn ou pnpm.

Pour l’installer avec npm, exécutez cette commande dans votre terminal :

 npm install react-intl

Pour l’installer à l’aide de yarn, exécutez cette commande :

 yarn add react-intl

Comment utiliser la bibliothèque React Intl

Une fois que vous avez installé la bibliothèque React Intl, vous pouvez utiliser ses composants et fonctionnalités dans votre application. React Intl a des fonctions similaires à l’API JavaScript Intl.

Certains composants précieux proposés par la bibliothèque React Intl incluent les composants FormattedMessage et IntlProvider.

Le composant FormattedMessage affiche les chaînes traduites dans votre application, tandis que le composant IntlProvider fournit les traductions et les informations de mise en forme à votre application.

Vous devez créer un fichier de traduction avant de pouvoir commencer à utiliser les composants FormattedMessage et IntlProvider pour traduire votre application. Un fichier de traduction contient toutes les traductions de votre application. Vous pouvez créer des fichiers séparés pour chaque langue et paramètre régional ou utiliser un seul fichier pour contenir toutes les traductions.

Par exemple:

 export const messagesInFrench = {
    greeting: "Bonjour {name}"
}
  
export const messagesInItalian = {
    greeting: "Buongiorno {name}"
}

Cet exemple de fichier de traduction contient deux objets de traduction : messagesInFrench et messagesInItalian. Vous pouvez remplacer l’espace réservé {name} dans la chaîne de salutation lors de l’exécution par une valeur dynamique.

Pour utiliser les traductions dans votre application, vous devez encapsuler le composant racine de votre application avec le composant IntlProvider. Le composant IntlProvider prend trois accessoires React : locale, defaultLocale et messages.

La propriété locale accepte une chaîne qui spécifie les paramètres régionaux de l’utilisateur, tandis que defaultLocale spécifie une solution de secours si les paramètres régionaux préférés de l’utilisateur ne sont pas disponibles. Enfin, le prop messages accepte un objet de traduction.

Voici un exemple montrant comment vous pouvez utiliser IntlProvider :

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);

Cet exemple transmet les paramètres régionaux fr, la traduction messagesInFrench et un paramètre régional en par défaut au composant IntlProvider.

Vous pouvez transmettre plusieurs objets de paramètres régionaux ou de traduction, et IntlProvider détectera automatiquement la langue du navigateur de l’utilisateur et utilisera les traductions appropriées.

Pour afficher les chaînes traduites dans votre application, utilisez le composant FormattedMessage. Le composant FormattedMessage prend un accessoire id correspondant à un ID de message dans l’objet messages.

Le composant prend également un defaultMessage et des prop values. La prop defaultMessage spécifie un message de secours si une traduction n’est pas disponible pour les paramètres régionaux actuels, tandis que la prop values fournit des valeurs dynamiques pour les espaces réservés dans vos messages traduits.

Par exemple:

 import React from "react";
import { FormattedMessage } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}
export default App;

Dans ce bloc de code, la prop id du composant FormattedMessage utilise la clé de salutation de l’objet messagesInFrench, et la prop values remplace l’espace réservé {name} par la valeur « John ».

Formatage des nombres avec le composant FormattedNumber

React Intl fournit également le composant FormattedNumber que vous pouvez utiliser pour formater les nombres en fonction des paramètres régionaux actuels. Le composant accepte divers accessoires pour personnaliser la mise en forme, tels que le style, la devise et les chiffres de fraction minimum et maximum.

Voici quelques exemples:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}
export default App;

Cet exemple utilise le composant FormattedNumber qui accepte une prop value spécifiant le nombre que vous souhaitez formater.

À l’aide de l’accessoire de style, vous pouvez personnaliser l’apparence du nombre formaté. Vous pouvez définir le prop de style sur décimal, pourcentage ou devise.

Lorsque vous définissez la prop de style sur la devise, le composant FormattedNumber formate le nombre en tant que valeur monétaire à l’aide du code spécifié dans la prop de devise :

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}
export default App;

Le composant FormattedNumber formate le nombre dans le bloc de code ci-dessus en utilisant le style de devise et le code de devise USD.

Vous pouvez également formater des nombres avec un nombre spécifique de décimales à l’aide des props minimumFractionDigits et maximumFractionDigits.

La prop minimumFractionDigits spécifie le nombre minimum de chiffres de fraction à afficher. En revanche, la prop maximumFractionDigits spécifie le nombre maximal de chiffres de fraction.

Si un nombre a moins de chiffres de fraction que le minimumFractionDigits spécifié, React Intl le remplira de zéros. Si le nombre a plus de chiffres de fraction que le maximumFractionDigits spécifié, la bibliothèque arrondira le nombre vers le haut.

Voici un exemple montrant comment vous pouvez utiliser ces accessoires :

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}
export default App;

Formatage des dates avec le composant FormattedDate

Vous pouvez formater les dates de manière cohérente et facile à lire en utilisant React Intl. Le composant FormattedDate fournit un moyen simple et efficace de formater les dates. Cela fonctionne de la même manière que les bibliothèques date-heure qui formatent les dates, telles que Moment.js.

Le composant FormattedDate prend de nombreux accessoires, tels que la valeur, le jour, le mois et l’année. La prop value accepte la date que vous souhaitez formater, et les autres props configurent sa mise en forme.

Par exemple:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Dans cet exemple, la valeur prop utilise la date actuelle. De plus, en utilisant les accessoires jour, mois et année, vous spécifiez que vous souhaitez que l’année, le mois et le jour s’affichent dans un format long.

Outre le jour, le mois et l’année, d’autres accessoires formatent également l’apparence de la date. Voici les accessoires et les valeurs qu’ils acceptent :

année : « numérique », « 2 chiffres »
mois : « numérique », « 2 chiffres », « étroit », « court », « long »
jour : « numérique », « 2 chiffres »
heure : « numérique », « 2 chiffres »
minute : « numérique », « 2 chiffres »
seconde : « numérique », « 2 chiffres »
timeZoneName : « court », « long »

Vous pouvez également utiliser le composant FormattedDate pour formater et afficher l’heure :

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Internationalisez vos applications React pour un public plus large

Vous avez appris à installer et à configurer la bibliothèque React-Intl dans votre application React. React-intl facilite le formatage des nombres, des dates et des devises de votre application React. Vous pouvez formater les données en fonction des paramètres régionaux de l’utilisateur à l’aide des composants FormattedMessage, FormattedNumber et FormattedDate.

Les développeurs de React commettent souvent des erreurs qui peuvent entraîner de graves conséquences. Par exemple, ne pas mettre à jour correctement l’état. Il est important d’être conscient de ces erreurs courantes et de les corriger tôt pour éviter des problèmes coûteux.