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 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.

Installation de React International

Pour utiliser la bibliothèque React Intl, vous devez d'abord l'installer. Vous pouvez le faire avec plus d'un gestionnaire de paquets: npm, fil ou pnpm.

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

npm installer réagir-intl

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

fil ajouter réagir-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 à la

API internationale JavaScript.

Certains composants précieux offerts par la bibliothèque React Intl incluent le Message formaté et Fournisseur international Composants.

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:

exporterconstante messagesEnFrançais = {
 salutation: "Bonjour {nom}"
}

exporterconstante messagesEnItalien = {
 salutation: "Buongiorno {nom}"
}

Cet exemple de fichier de traduction contient deux objets de traduction: messagesInFrench et messagesenitalien. Vous pouvez remplacer l'espace réservé {nom} dans le salutation chaîne à l'exécution avec une valeur dynamique.

Pour utiliser les traductions dans votre application, vous devez envelopper le composant racine de votre application avec le Fournisseur international composant. Le composant IntlProvider prend trois Réagissez les accessoires: lieu, 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 :

importer Réagir depuis"réagir";
importer RéagirDOM depuis"react-dom/client";
importer Application depuis"./Application";
importer { Fournisseur international } depuis"réagir-intl";
importer { messagesEnFrançais } depuis"./traduction";
ReactDOM.createRoot(document.getElementById("racine")).rendre(

"en" messages={messagesEnFrançais} defaultLocale="fr">

 </IntlProvider>
 </React.StrictMode>
);

Cet exemple passe le en locale, le messagesInFrench traduction, et une valeur par défaut fr locale à la Fournisseur international composant.

Vous pouvez transmettre plus d'un objet de paramètres régionaux ou de traduction, et le Fournisseur international 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 la Message formaté composant. Le Message formaté le composant prend une identifiant prop correspondant à un ID de message dans l'objet messages.

Le composant prend également une message par défaut et valeurs soutenir. Le message par défaut prop spécifie un message de secours si une traduction n'est pas disponible pour la locale actuelle, tandis que le valeurs prop fournit des valeurs dynamiques pour les espaces réservés dans vos messages traduits.

Par exemple:

importer Réagir depuis"réagir";
importer { Message Formaté } depuis"réagir-intl";
fonctionApplication() {
retour (




 identifiant="salutation"
 message par défaut="Bonjour {nom}"
 valeurs={{ nom: 'John'}}
 />
 </p>
 </div>
 );
}
exporterdéfaut application ;

Dans ce bloc de code, le identifiant accessoire de la Message formaté composant utilise le salutation clé de la messagesInFrench objet, et le valeurs l'accessoire remplace le {nom} espace réservé avec la valeur "John".

Formatage des nombres avec le composant FormattedNumber

React Intl fournit également le NombreFormaté composant 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:

importer Réagir depuis"réagir";
importer {NuméroFormat} depuis"réagir-intl";
fonctionApplication() {
retour (




 Décimal: <NombreFormatévaleur={123.456}style="décimal" />
 </p>


 Pour cent: <NombreFormatévaleur={123.456}style="pour cent" />
 </p>
 </div>
 );
}
exporterdéfaut application ;

Cet exemple utilise le NombreFormaté composant qui accepte un valeur prop spécifiant le nombre que vous souhaitez formater.

En utilisant le style prop, vous pouvez personnaliser l'apparence du nombre formaté. Vous pouvez régler le style soutenir à décimal, pour cent, ou monnaie.

Lorsque vous réglez le style soutien à la monnaie, le NombreFormaté formate le nombre en tant que valeur monétaire à l'aide du code spécifié dans le monnaie soutenir:

importer Réagir depuis"réagir";
importer {NuméroFormat} depuis"réagir-intl";
fonctionApplication() {
retour (




 Prix: <NombreFormatévaleur={123.456}style="monnaie"monnaie="USD" />
 </p>
 </div>
 );
}
exporterdéfaut application ;

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

Vous pouvez également formater des nombres avec un nombre spécifique de décimales à l'aide de la minimumFractionDigits et maximumFractionDigitsmaximumFractionDigits accessoires.

Le minimumFractionDigits prop spécifie le nombre minimum de chiffres de fraction à afficher. En revanche, le maximumFractionDigitsmaximumFractionDigits prop spécifie le nombre maximum de chiffres de fraction.

Si un nombre a moins de chiffres de fraction que le nombre spécifié minimumFractionDigits, React Intl le remplira de zéros. Si le nombre a plus de chiffres de fraction que le nombre spécifié maximumFractionDigitsmaximumFractionDigits, la bibliothèque arrondira le nombre au supérieur.

Voici un exemple montrant comment vous pouvez utiliser ces accessoires :

importer Réagir depuis"réagir";
importer {NuméroFormat} depuis"réagir-intl";
fonctionApplication() {
retour (




 valeur={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
exporterdéfaut application ;

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 Dateformatée fournit un moyen simple et efficace de formater les dates. Cela fonctionne de la même manière que bibliothèques date-heure qui formatent les dates, telles que Moment.js.

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

Par exemple:

importer Réagir depuis"réagir";
importer { Date formatée } depuis"réagir-intl";
fonctionApplication() {
constante aujourd'hui = nouveauDate();
retour (




 Aujourd'huila date est
 valeur={aujourd'hui}
 jour="numérique"
 mois="long"
 année="numérique"
 />
 </p>
 </div>
 );
}
exporterdéfaut application ;

Dans cet exemple, le valeur prop utilise la date actuelle. Aussi, en utilisant le jour, mois, et année props, 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"
• deuxième: "numérique", "2 chiffres"
• nom du fuseau horaire: "court long"

Vous pouvez également utiliser le Dateformatée composant pour formater et afficher l'heure :

importer Réagir depuis"réagir";
importer { Date formatée } depuis"réagir-intl";
fonctionApplication() {
constante aujourd'hui = nouveauDate();
retour (




 Le temps est
 valeur={aujourd'hui}
 heure="numérique"
 minutes="numérique"
 seconde="numérique"
 />
 </p>
 </div>
 );
}
exporterdéfaut application ;

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.