Comment utiliser React Intl pour internationaliser vos applications React
React Intl est une bibliothèque largement utilisée qui offre un ensemble d'outils et de composants pour faciliter l'internationalisation des applications React. L'internationalisation, souvent désignée par l'abréviation i18n, est le processus qui consiste à adapter une application afin qu'elle soit compatible avec différentes langues et cultures.
Grâce à React Intl, il devient simple de prendre en charge plusieurs langues et paramètres régionaux au sein de votre application React.
Installation de React International
Avant de pouvoir utiliser la bibliothèque React Intl, il est nécessaire de l'installer. Vous pouvez effectuer cette installation en utilisant différents gestionnaires de paquets, tels que npm, yarn ou pnpm.
Pour l'installer via npm, lancez la commande suivante dans votre terminal :
npm install react-intl
Si vous préférez utiliser yarn, la commande à exécuter est :
yarn add react-intl
Comment utiliser la bibliothèque React Intl
Une fois la bibliothèque React Intl installée, vous pouvez commencer à exploiter ses composants et fonctionnalités au sein de votre application. React Intl propose des fonctionnalités similaires à l'API JavaScript Intl.
Parmi les composants importants offerts par React Intl, on retrouve notamment les composants FormattedMessage et IntlProvider.
Le composant FormattedMessage permet d'afficher les chaînes traduites dans votre application, tandis que le composant IntlProvider fournit les traductions et les informations de formatage nécessaires à l'ensemble de votre application.
Avant de pouvoir utiliser les composants FormattedMessage et IntlProvider pour traduire votre application, vous devez d'abord créer un fichier de traduction. Ce fichier regroupe toutes les traductions utilisées dans votre application. Vous avez la possibilité de créer des fichiers distincts pour chaque langue et paramètre régional, ou de centraliser toutes les traductions dans un seul fichier.
Voici un exemple :
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Cet exemple de fichier de traduction contient deux objets de traductions : `messagesInFrench` et `messagesInItalian`. L'espace réservé `{name}` présent dans la chaîne de salutation peut être remplacé par une valeur dynamique lors de l'exécution.
Pour exploiter ces traductions dans votre application, il est nécessaire d'encapsuler le composant racine de votre application avec le composant IntlProvider. Ce composant accepte trois propriétés React : `locale`, `defaultLocale` et `messages`.
La propriété `locale` reçoit une chaîne de caractères spécifiant les paramètres régionaux de l'utilisateur, tandis que `defaultLocale` définit une langue de remplacement si les paramètres régionaux préférés de l'utilisateur ne sont pas disponibles. Enfin, la propriété `messages` prend en paramètre un objet de traduction.
Voici un exemple illustrant l'utilisation de 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 configure le composant IntlProvider avec les paramètres régionaux "fr", les traductions définies dans `messagesInFrench` et la langue par défaut "en".
Il est possible de transmettre plusieurs objets de paramètres régionaux ou de traductions, et IntlProvider détectera automatiquement la langue du navigateur de l'utilisateur afin d'utiliser les traductions appropriées.
Pour afficher les chaînes traduites au sein de votre application, utilisez le composant FormattedMessage. Ce composant accepte une propriété `id` qui doit correspondre à l'identifiant d'un message dans l'objet de traductions.
Le composant prend également les propriétés `defaultMessage` et `values`. La propriété `defaultMessage` permet de définir un message de secours si la traduction n'est pas disponible pour les paramètres régionaux courants, et `values` fournit des valeurs dynamiques pour les espaces réservés dans vos messages traduits.
Voici un 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 cet exemple, la propriété `id` du composant FormattedMessage fait référence à la clé "greeting" de l'objet `messagesInFrench`, et la propriété `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, qui permet de formater les nombres en fonction des paramètres régionaux actuels. Ce composant accepte différentes options pour personnaliser le formatage, telles que le style, la devise, ainsi que le nombre minimal et maximal de chiffres après la virgule.
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 avec une propriété `value` spécifiant le nombre à formater.
La propriété `style` permet de personnaliser l'apparence du nombre formaté. Vous pouvez définir sa valeur sur "decimal" pour un format décimal, "percent" pour un pourcentage ou "currency" pour une devise.
Lorsque vous définissez la propriété `style` sur "currency", le composant FormattedNumber formate le nombre comme une valeur monétaire en utilisant le code spécifié dans la propriété `currency` :
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 code ci-dessus formate le nombre en utilisant le style "currency" et le code de devise "USD".
Il est également possible de formater les nombres avec un nombre spécifique de décimales en utilisant les propriétés `minimumFractionDigits` et `maximumFractionDigits`.
La propriété `minimumFractionDigits` spécifie le nombre minimum de chiffres à afficher après la virgule. À l'inverse, `maximumFractionDigits` spécifie le nombre maximum de chiffres après la virgule.
Si un nombre a moins de chiffres après la virgule que spécifié par `minimumFractionDigits`, React Intl complétera avec des zéros. Si le nombre a plus de chiffres après la virgule que spécifié par `maximumFractionDigits`, la bibliothèque arrondira le nombre.
Voici un exemple d'utilisation de ces propriétés :
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
React Intl permet de formater les dates de manière simple et cohérente. Le composant FormattedDate offre un moyen efficace de formater les dates. Son fonctionnement est similaire à celui des bibliothèques de gestion de dates et d'heures telles que Moment.js.
Le composant FormattedDate accepte de nombreuses propriétés, dont `value`, `day`, `month` et `year`. La propriété `value` reçoit la date à formater, tandis que les autres propriétés permettent de configurer le format d'affichage.
Voici un 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 propriété `value` utilise la date actuelle. De plus, les propriétés `day`, `month` et `year` spécifient que vous souhaitez afficher l'année, le mois et le jour dans un format long.
En plus de `day`, `month` et `year`, d'autres propriétés permettent de personnaliser l'apparence de la date. Voici les propriétés disponibles ainsi que les valeurs qu'elles peuvent prendre :
- year : "numeric", "2-digit"
- month : "numeric", "2-digit", "narrow", "short", "long"
- day : "numeric", "2-digit"
- hour : "numeric", "2-digit"
- minute : "numeric", "2-digit"
- second : "numeric", "2-digit"
- timeZoneName : "short", "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 dans votre application. L'utilisation des composants FormattedMessage, FormattedNumber et FormattedDate vous permet d'adapter l'affichage des données en fonction des paramètres régionaux de l'utilisateur.
Les développeurs React peuvent parfois commettre des erreurs qui peuvent avoir des conséquences importantes, comme par exemple ne pas mettre à jour correctement l'état. Il est essentiel d'être conscient de ces erreurs courantes et de les corriger rapidement pour éviter des problèmes coûteux.