Comment utiliser React Intl pour internationaliser vos applications React
React Intl est une bibliothèque populaire qui fournit un ensemble de composants et d’utilitaires pour internationaliser les applications React. L’internationalisation, également connue sous le nom d’i18n, est le processus d’adaptation d’une application à différentes langues et cultures.
Vous pouvez facilement prendre en charge plusieurs langues et locales dans votre application React avec ReactIntl.
Installation de React Intl
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 :
Pour l’installer avec yarn, exécutez cette commande :
Comment utiliser la bibliothèque React Intl
Une fois que vous avez installé la bibliothèque React Intl, vous pouvez utiliser ses composants et ses fonctionnalités dans votre application. React Intl dispose de fonctions similaires à celles de l’API JavaScript Intl.
Parmi les composants utiles proposés par la bibliothèque React Intl, on peut citer les éléments suivants. FormattedMessage et IntlProvider composants.
Le composant FormattedMessage affiche les chaînes traduites dans votre application, tandis que le composant IntlProvider fournit les traductions et les informations de formatage à 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 distincts pour chaque langue et chaque locale ou utiliser un seul fichier pour contenir toutes les traductions.
Par exemple :
Cet exemple de fichier de traduction contient deux objets de traduction : messagesenfrançais et messages en italien. Vous pouvez remplacer le caractère générique nom par le caractère générique nom . salutation au moment de l’exécution avec une valeur dynamique.
Pour utiliser les traductions dans votre application, vous devez envelopper le composant racine de votre application avec l’élément IntlProvider de votre application. Le composant IntlProvider prend trois props React : locale, defaultLocale et les messages.
La propriété locale accepte une chaîne de caractères qui spécifie la locale de l’utilisateur, tandis que la propriété defaultLocale spécifie une solution de repli si la locale préférée de l’utilisateur n’est pas disponible. Enfin, la propriété messages accepte un objet de traduction.
Voici un exemple montrant comment vous pouvez utiliser IntlProvider :
Cet exemple transmet l’objet fr la locale messagesInFrench et une traduction par défaut en à la traduction IntlProvider composant.
Vous pouvez transmettre plus d’un objet de locale ou de traduction, et l’élément IntlProvider détectera automatiquement la langue du navigateur de l’utilisateur et utilisera les traductions appropriées.
Pour afficher des chaînes de caractères traduites dans votre application, utilisez l’option Message formaté pour afficher des chaînes de caractères traduites. Le composant FormattedMessage prend un élément id correspondant à l’identifiant d’un message dans l’objet messages.
Le composant prend également une propriété defaultMessage et valeurs prop. Les valeurs defaultMessage spécifie un message de remplacement si une traduction n’est pas disponible pour la locale actuelle, tandis que la propriété values fournit des valeurs dynamiques pour les espaces réservés dans vos messages traduits.
Par exemple :
Dans ce bloc de code, la propriété id de l’élément Message formaté utilise la propriété de l’accueil du composant messagesenfrançais et la clé valeurs remplace l’objet nom par la valeur « John ».
Mise en forme des nombres à l’aide du composant FormattedNumber
React Intl fournit également le composant FormattedNumber que vous pouvez utiliser pour formater les nombres en fonction de la locale actuelle. Le composant accepte divers accessoires pour personnaliser le formatage, tels que le style, la devise et les chiffres minimum et maximum de la fraction.
Voici quelques exemples :
Cet exemple utilise le composant Nombre formaté qui accepte un élément valeur qui spécifie le nombre à formater.
En utilisant la valeur style vous pouvez personnaliser l’apparence du nombre formaté. Vous pouvez définir le style style à décimale, pour cent ou la monnaie.
Lorsque vous réglez la devise style à devise, la propriété Nombre formaté formate le nombre en tant que valeur monétaire à l’aide du code spécifié dans l’élément devise prop :
La Nombre formaté formate le nombre dans le bloc de code ci-dessus à l’aide de l’élément devise et le style USD code de la monnaie.
Vous pouvez également formater les nombres avec un nombre spécifique de décimales à l’aide de la fonction minimumFractionDigits et maximumFractionDigits accessoires.
Les minimumFractionDigits spécifie le nombre minimum de chiffres de la fraction à afficher. En revanche, la propriété maximumFractionDigits prop spécifie le nombre maximum de chiffres de la fraction.
Si un nombre a moins de chiffres de fraction que le nombre spécifié de minimumFractionDigits React Intl le remplacera par des zéros. Si le nombre a plus de chiffres de fraction que la valeur spécifiée de maximumFractionDigits la bibliothèque arrondira le nombre vers le haut.
Voici un exemple montrant comment vous pouvez utiliser ces fonctions :
Formatage des dates avec le composant FormattedDate
Vous pouvez formater les dates d’une manière cohérente et facile à lire en utilisant React Intl. Le composant FormattedDate offre un moyen simple et efficace de formater les dates. Il fonctionne de la même manière que les bibliothèques de formatage de dates, telles que Moment.js.
Le composant FormattedDate prend en charge de nombreux accessoires, tels que valeur, jour, mois et l’année. L’attribut value accepte la date que vous souhaitez formater, et les autres attributs configurent son formatage.
Par exemple :
Dans cet exemple, la propriété valeur utilise la date du jour. De même, l’utilisation de la propriété jour, mois, et année Avec les accessoires, vous indiquez que vous voulez 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 paramètres permettent de formater l’apparence de la date. Voici ces options et les valeurs qu’elles 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 »
- nom du fuseau horaire : « court », « long »
Vous pouvez également utiliser la fonction Date formatée pour formater et afficher l’heure :
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 chiffres, des dates et des devises de votre application React. Vous pouvez formater les données en fonction de la locale de l’utilisateur à l’aide des composants FormattedMessage, FormattedNumber et FormattedDate.
Les développeurs React commettent souvent des erreurs qui peuvent avoir de graves conséquences. Par exemple, ne pas mettre à jour l’état correctement. Il est important d’être conscient de ces erreurs courantes et de les corriger rapidement pour éviter des problèmes coûteux.
