Le package de composants React Internationalization peut vous aider à traduire les numéros et les dates de votre application dans des formats appropriés à la région.
Lors de la création d’applications destinées aux utilisateurs du monde entier, il est important d’afficher les données dans des formats familiers. Une date comme « 3/4/2024 » pourrait signifier le 4 mars pour les Américains mais le 3 avril pour les Européens. De même, le nombre « 1 234,56 » utilise différents séparateurs selon les pays ; certains utilisent des virgules pour les milliers et des points pour les décimales, tandis que d’autres font le contraire. C’est ici internationalisation entre.
Dans cet article, nous explorerons les progrès Internationalisation de KendoReact package et voyez comment il gère l’analyse et le formatage des dates et des nombres selon différentes conventions.
Le package d’internationalisation KendoReact fait partie de KendoRéagirune bibliothèque d’interface utilisateur de niveau entreprise avec plus de 120 composants pour créer des applications raffinées et performantes.
Internationalisation vs localisation
Avant de plonger dans le vif du sujet, clarifions la différence entre internationalisation et localisationcar ces termes sont souvent utilisés de manière interchangeable mais peuvent avoir des objectifs distincts :
- Internationalisation se concentre sur l’analyse et le formatage des dates et des nombres selon des règles spécifiques aux paramètres régionaux. Il affiche « 1234.56 » sous la forme « 1.234,56 » en Allemagne ou les dates suivent le format JJ/MM/AAAA au Royaume-Uni.
- Localisation gère la traduction du texte de l’interface utilisateur et prend en charge les mises en page de droite à gauche (RTL) pour des langues comme l’arabe. Il définit les étiquettes des boutons, les messages d’erreur et autres textes d’interface dans la langue préférée de l’utilisateur.
Pour une introduction à la localisation et au Localisation de KendoReact forfait, consultez notre article sur Premiers pas avec la localisation de KendoReact.
Ensemble, ces deux packages fournissent l’ensemble la mondialisation fonctionnalités de KendoReact. Dans cet article, nous nous concentrerons exclusivement sur l’internationalisation.
Internationalisation de KendoReact
Le package d’internationalisation KendoReact est construit sur le Référentiel de données régionales communes Unicode (CLDR)qui fournit des données locales standardisées pour des centaines de langues et de régions. Le package React Internationalization exporte un IntlProvider composant qui fournit des capacités de formatage et d’analyse dans l’arborescence des composants d’une application React.
Mise en place de l’internationalisation
Pour commencer, nous devrons installer le package :
npm install @progress/kendo-react-intl
Pour les paramètres régionaux autres que ceux par défaut en-US, nous aurons également besoin de données CLDRque l’on peut trouver en installant les packages nécessaires :
npm install cldr-core cldr-numbers-full cldr-dates-full
Ces packages contiennent les règles de formatage spécifiques aux paramètres régionaux que le package Internationalization utilise pour formater correctement les dates et les nombres.
Formatage des nombres
Commençons par un exemple pratique de formatage des nombres. Différents paramètres régionaux formatent les nombres différemment ; ce qui apparaît comme « 1 234,56 » aux États-Unis devient « 1 234,56 » en Allemagne et « 1 234,56 » en France.
Voici comment formater les nombres pour différents paramètres régionaux à l’aide de l’outil IntlProvider et le useInternationalization crochet:
import * as React from 'react';
import {
IntlProvider,
load,
useInternationalization,
} from '@progress/kendo-react-intl';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';
import enNumbers from 'cldr-numbers-full/main/en/numbers.json';
import enCurrencies from 'cldr-numbers-full/main/en/currencies.json';
import deNumbers from 'cldr-numbers-full/main/de/numbers.json';
import deCurrencies from 'cldr-numbers-full/main/de/currencies.json';
import esNumbers from 'cldr-numbers-full/main/es/numbers.json';
import esCurrencies from 'cldr-numbers-full/main/es/currencies.json';
load(
likelySubtags,
currencyData,
weekData,
enNumbers,
enCurrencies,
deNumbers,
deCurrencies,
esNumbers,
esCurrencies
);
const NumberDisplay = ({ value }) => {
const intl = useInternationalization();
return (
<div>
<p><strong>Standard format:</strong> {intl.formatNumber(value, 'n2')}</p>
<p><strong>Currency format:</strong> {intl.formatNumber(value, 'c')}</p>
<p><strong>Percentage:</strong> {intl.formatNumber(value / 100, 'p2')}</p>
</div>
);
};
const App = () => {
const numberValue = 1234.56;
return (
<div>
<h3>English (US)</h3>
<IntlProvider locale="en">
<NumberDisplay value={numberValue} />
</IntlProvider>
<h3>German (Germany)</h3>
<IntlProvider locale="de">
<NumberDisplay value={numberValue} />
</IntlProvider>
<h3>Spanish (Spain)</h3>
<IntlProvider locale="es">
<NumberDisplay value={numberValue} />
</IntlProvider>
</div>
);
};
export default App;
Dans cet exemple, nous chargeons les données CLDR nécessaires en haut de notre fichier en utilisant le load fonction. Ensuite, nous enveloppons chaque section avec un IntlProvider qui spécifie les paramètres régionaux. À l’intérieur du NumberDisplay composant, nous utilisons le useInternationalization hook pour accéder au service d’internationalisation, qui fournit le formatNumber méthode.
Le formatNumber La méthode accepte une valeur et une chaîne de format. Les chaînes de format courantes incluent :
'n2'– nombre avec deux décimales'c'– devise'p2'– pourcentage avec deux décimales
Lorsque nous exécutons cette application, nous voyons la même valeur numérique (1234.56) affiché dans trois sections différentes, chacune formatée selon les conventions de ses paramètres régionaux respectifs :
Formatage des dates
Le formatage de la date est tout aussi important. La date du 6 novembre 2000 peut s’écrire « 11/6/2000 » aux États-Unis, « 06/11/2000 » au Royaume-Uni ou « 6.11.2000 » en Allemagne. Voyons comment gérer ces variations :
import * as React from 'react';
import {
IntlProvider,
load,
useInternationalization,
} from '@progress/kendo-react-intl';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import weekData from 'cldr-core/supplemental/weekData.json';
import enCaGregorian from 'cldr-dates-full/main/en/ca-gregorian.json';
import enTimeZoneNames from 'cldr-dates-full/main/en/timeZoneNames.json';
import deCaGregorian from 'cldr-dates-full/main/de/ca-gregorian.json';
import deTimeZoneNames from 'cldr-dates-full/main/de/timeZoneNames.json';
import esCaGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import esTimeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
load(
likelySubtags,
weekData,
enCaGregorian,
enTimeZoneNames,
deCaGregorian,
deTimeZoneNames,
esCaGregorian,
esTimeZoneNames
);
const DateDisplay = ({ value }) => {
const intl = useInternationalization();
return (
<div>
<p><strong>Short date:</strong> {intl.formatDate(value, 'd')}</p>
<p><strong>Long date:</strong> {intl.formatDate(value, 'D')}</p>
<p><strong>Full date:</strong> {intl.formatDate(value, 'EEEE, MMMM d, y')}</p>
</div>
);
};
const App = () => {
const dateValue = new Date(2000, 10, 6);
return (
<div>
<h3>English (US)</h3>
<IntlProvider locale="en">
<DateDisplay value={dateValue} />
</IntlProvider>
<h3>German (Germany)</h3>
<IntlProvider locale="de">
<DateDisplay value={dateValue} />
</IntlProvider>
<h3>Spanish (Spain)</h3>
<IntlProvider locale="es">
<DateDisplay value={dateValue} />
</IntlProvider>
</div>
);
};
export default App;
Le formatDate la méthode fonctionne de la même manière que formatNumberen acceptant une valeur de date et une chaîne de format. Les modèles de format courants incluent :
'd'– modèle de date courte'D'– modèle de date longue- Des modèles personnalisés comme
'EEEE, MMMM d, y'pour un contrôle total
L’exécution de cette application affiche la même date (6 novembre 2000) formatée de trois manières différentes dans les paramètres régionaux anglais, allemand et espagnol :
Changement de paramètres régionaux interactif
Nous allons maintenant créer un exemple plus interactif qui permet aux utilisateurs de basculer dynamiquement entre les paramètres régionaux. Cela démontre comment le package d’internationalisation peut s’adapter aux préférences de l’utilisateur en temps réel :
import * as React from 'react';
import {
IntlProvider,
load,
useInternationalization,
} from '@progress/kendo-react-intl';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';
import enNumbers from 'cldr-numbers-full/main/en/numbers.json';
import enCurrencies from 'cldr-numbers-full/main/en/currencies.json';
import enCaGregorian from 'cldr-dates-full/main/en/ca-gregorian.json';
import enTimeZoneNames from 'cldr-dates-full/main/en/timeZoneNames.json';
import deNumbers from 'cldr-numbers-full/main/de/numbers.json';
import deCurrencies from 'cldr-numbers-full/main/de/currencies.json';
import deCaGregorian from 'cldr-dates-full/main/de/ca-gregorian.json';
import deTimeZoneNames from 'cldr-dates-full/main/de/timeZoneNames.json';
import esNumbers from 'cldr-numbers-full/main/es/numbers.json';
import esCurrencies from 'cldr-numbers-full/main/es/currencies.json';
import esCaGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import esTimeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
load(
likelySubtags,
currencyData,
weekData,
enNumbers,
enCurrencies,
enCaGregorian,
enTimeZoneNames,
deNumbers,
deCurrencies,
deCaGregorian,
deTimeZoneNames,
esNumbers,
esCurrencies,
esCaGregorian,
esTimeZoneNames
);
const DataDisplay = () => {
const intl = useInternationalization();
const orderDate = new Date(2024, 2, 15);
const orderTotal = 1234.56;
const taxRate = 0.08;
return (
<div className="data-card">
<h4>Order Summary</h4>
<div className="data-row">
<span>Order Date:</span>
<strong>{intl.formatDate(orderDate, 'd')}</strong>
</div>
<div className="data-row">
<span>Subtotal:</span>
<strong>{intl.formatNumber(orderTotal, 'c')}</strong>
</div>
<div className="data-row">
<span>Tax Rate:</span>
<strong>{intl.formatNumber(taxRate, 'p0')}</strong>
</div>
<div className="data-row">
<span>Tax Amount:</span>
<strong>{intl.formatNumber(orderTotal * taxRate, 'c')}</strong>
</div>
<div className="data-row total">
<span>Total:</span>
<strong>{intl.formatNumber(orderTotal * (1 + taxRate), 'c')}</strong>
</div>
</div>
);
};
const App = () => {
const [locale, setLocale] = React.useState('en');
const handleLocaleChange = (event) => {
setLocale(event.target.value.value);
};
const localeOptions = [
{ text: 'English (US)', value: 'en' },
{ text: 'Deutsch (Deutschland)', value: 'de' },
{ text: 'Español (España)', value: 'es' },
];
return (
<div>
<div className="locale-selector">
<p>Select Locale:</p>
<DropDownList
data={localeOptions}
textField="text"
dataItemKey="value"
value={localeOptions.find((l) => l.value === locale)}
onChange={handleLocaleChange}
/>
</div>
<IntlProvider locale={locale}>
<DataDisplay />
</IntlProvider>
</div>
);
};
export default App;
Dans l’exemple ci-dessus, nous avons créé un récapitulatif de commande qui affiche les dates, les valeurs monétaires et les pourcentages. Lorsque l’utilisateur sélectionne une langue différente dans la liste déroulante, toutes les valeurs sont automatiquement mises à jour pour correspondre aux conventions de formatage de cette langue. Le format de date change, les séparateurs décimaux s’ajustent, les symboles monétaires sont mis à jour et les affichages en pourcentage suivent les conventions locales, le tout sans aucune logique de formatage manuel.
Conclure
Le package KendoReact Internationalization fournit un moyen efficace de formater les dates et les nombres selon les conventions culturelles. En tirant parti Données CLDR et le IntlProvider composant, nous pouvons permettre à nos applications React d’afficher des données dans des formats qui semblent naturels aux utilisateurs, quel que soit leur emplacement.
Pour plus de détails sur le package KendoReact Internationalization, y compris des options de formatage et des capacités d’analyse plus avancées, consultez le documentation officielle.
Essayez la bibliothèque par vous-même :
Source link