Internationalisation

• Pas tous les utilisateurs de votre application parlent français.
• On doit « softcoder » tout le texte de l’application pour l’afficher dans la langue de l’utilisateur.

• Ce n’est pas seulement le texte qui doit être localisé mais aussi :

  • Les dates
  • L’heure
  • Les montants d’argent
  • Les pourcentages
  • Le singulier et le pluriel des mots
  • Les guillemets

React et l’internationalisation

• Plusieurs modules existent pour internationaliser React
• Dans ce cours, nous allons utiliser React-Intl

Pour installer React-Intl :

console

npm install react-intl

Manuel

React-intl

Installation minimale dans React

1. Créer un dossier lang sous src
2. Créer un fichier json nommé fr.json

3. Ajoutez vos clés de traductions comme ceci :

   {
       "app.titre": "Titre de l'application"
   }
   

4. Important de bien nommer les clés, pour donner le plus de contexte possible à l’équipe de traduction. Par exemple, le texte à l’intérieur d’un input pourrait avoir la clé suivante :

   {
       "formulaireajout.commentaire.placeholder": "Entrer un commentaire"
   }
   

Code minimal

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

import { IntlProvider } from 'react-intl';
import Francais from './lang/fr.json';

const locale = 'fr';
const messages = Francais;

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  </React.StrictMode>
);

Message traduit simple

<FormattedMessage id="app.titre" defaultMessage="Titre" />

Manuel

FormattedMessage

Message avec variable

lang/fr.json

{
    "app.clics.label": "Il y a eu {nombreclics} clics"
}

app.tsx

<FormattedMessage
    id="app.clics.label"
    defaultMessage="Titre"
    values={{ nombreclics: count }}
/>

Pour traduire du texte avec la possibilité de pluriel

lang/fr.json

{
  "app.clics.pluriel.label": "{nombreclics, plural,=0 {Il n'y a pas eu de clic} one {Il y a eu un clic} other {Il y a eu {nombreclics} clics}}"
}

app.tsx

<FormattedMessage
    id="app.clics.pluriel.label"
    defaultMessage="Titre"
    values={{ nombreclics: count }}
/>

Manuel

Format des messages

Pour formater une date dans le format de la langue cible

app.tsx

const maintenant = new Date();

<FormattedDate
    value={maintenant}
    year="numeric"
    month="long"
    day="2-digit"
/>

Manuel

FormattedDate

Pour formatter l’heure dans le format de la langue cible

app.tsx

const maintenant = new Date();
const heure = maintenant.getTime();

<FormattedTime value={heure} />
<br />
<FormattedTime value={heure} timeZone="America/Vancouver" />

Manuel

FormattedTime

Pour formater une devise (monétaire)

app.tsx

const prix = 12.35;

<FormattedNumber
    value={prix}
    style="currency"
    currency="CAD"
    currencyDisplay="symbol"
/>

Manuel

FormattedNumber

Pour formater un pourcentage

app.tsx

const rabais = 15 / 100;

<FormattedNumber value={rabais} style="percent" />

CodeSandbox

Démo - Intl

Sélecteur de langue

Maintenant que le texte est traduit, voici ce qu'il faut faire pour changer la langue dynamiquement :

1. Créer un contexte pour la langue
2. Ajouter une fonction pour changer la langue dans le contexte
3. Créer un provider pour le contexte
4. Utiliser le contexte dans le composant qui aura le sélecteur
5. Créer un sélecteur de langue et appeler la fonction pour changer la langue

Note

Je laisse ce point sans démonstration, un petit défi pour l'exercice qui s'en vient!