Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:traductions [2025/09/29 15:55] – [Stocker un fichier de traduction] paolofront:traductions [2025/09/29 17:10] (Version actuelle) – [Configurer i18next] paolo
Ligne 1: Ligne 1:
 # Traductions # Traductions
  
 +Documentation [i18next](https://www.i18next.com/)  
 Documentation [react-i18next](https://react.i18next.com/)   Documentation [react-i18next](https://react.i18next.com/)  
 Documenation [Intl](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl) Documenation [Intl](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl)
Ligne 6: Ligne 7:
 Vous souhaitez développer une application traduites en plusieures langues. Aucun problème, **react-i18next** met à dispoistion un système qui gére des fichiers de traduction. Il permet de traduire directement du texte dans vos composants et de gérer dans des cas plus complexes des formats (date, nombre, ...). Vous souhaitez développer une application traduites en plusieures langues. Aucun problème, **react-i18next** met à dispoistion un système qui gére des fichiers de traduction. Il permet de traduire directement du texte dans vos composants et de gérer dans des cas plus complexes des formats (date, nombre, ...).
  
-Nous vous invitons à consulter également l'objet natif ''Intl'' de **JavaScript** pour gérer tout type de formats.+Nous vous invitons à consulter également l'objet natif ''Intl'' de **JavaScript** pour gérer tout type de formats 
 +.
 ### Stocker un fichier de traduction ### Stocker un fichier de traduction
  
Ligne 13: Ligne 15:
   * Dans le dossier ''public'', ils sont chargés dynamiquement et peuvent être modifiés sans rebuild.   * Dans le dossier ''public'', ils sont chargés dynamiquement et peuvent être modifiés sans rebuild.
   * Dans le dossier ''src'', ils sont chargés statiquement.   * Dans le dossier ''src'', ils sont chargés statiquement.
 +
 +Nous ne traiterons ici la méthode "dynamique". Pour la méthode "statique", veuillez référer à la documentation de l'astuce **Fichiers de traductions statiques**.
 +### Faire un fichier de traduction
 +
 +Encore une fois, il y a deux méthodes pour organiser ses fichiers de traductions:
 +
 +  * un fichier par locale (''en.json'', ''fr.json'', ...).
 +  * un dossier par locale (''en'', ''fr'', ...) contenant des fichiers "namespace" (''login-page.json'', ''home-page.json'', ...)
 +
 +Nous ne traiterons ici la première méthode. Pour la seconde, veuillez vous référer la documentation de l'astuce **Faire des fichiers de traductions "namespace"**.
 +
 +Comme nous avons un fichier par langue qui doit potentiellement gérer plusieures pages, plusieurs composants, il s'agirait de bien s'organiser. Essayons avec notre page **Login**.
  
 ``` ```
 +// public/locales/en.json
 +
 { {
     "loginPage": {     "loginPage": {
         "emailInput": {         "emailInput": {
-            "label": "Adresse mail", +            "label": "Email address", 
-            "placeholder": "Tapez votre adresse mail ici..."+            "placeholder": "Write your email address here ..." 
 +        }, 
 +        "passwordInput": { 
 +            "label": "Password", 
 +            "placeholder": "●●●●●●●●"  
 +        }, 
 +        "button": "Login" 
 +    } 
 +} 
 +``` 
 + 
 +``` 
 +// public/locales/fr.json 
 + 
 +{ 
 +    "loginPage": { 
 +        "emailInput": { 
 +            "label": "Adresse email", 
 +            "placeholder": "Tapez votre adresse email ici..."
         },         },
         "passwordInput": {         "passwordInput": {
Ligne 29: Ligne 63:
 } }
 ``` ```
 +### Configurer i18next
 +
 +Pour cela, nous devons:
 +
 +  * Créer un fichier de configuration dans lequel nous avons besoin d'utiliser ''HttpBackend'' pour charger les fichiers de traductions du dossier ''public'' et de ''initReactI18next'' qui joue le rôle de plugin pour **react-i18next**.
  
 ``` ```
 +// src/i18n/index.js
 +
 import i18n from "i18next"; import i18n from "i18next";
 import { initReactI18next } from "react-i18next"; import { initReactI18next } from "react-i18next";
 import HttpBackend from "i18next-http-backend"; import HttpBackend from "i18next-http-backend";
- 
-// import en from "./languages/en.json"; 
-// import fr from "./languages/fr.json"; 
- 
-// const resources = { 
-//   en, 
-//   fr, 
-// }; 
  
 i18n i18n
Ligne 47: Ligne 80:
   .use(initReactI18next)   .use(initReactI18next)
   .init({   .init({
-    // resources, 
-    ns: ["LoginPage", "homePage", "error404Page"], 
     interpolation: {     interpolation: {
-      escapeValue: false, // react already safes from xss+      escapeValue: false,
     },     },
     backend: {     backend: {
-      loadPath: "/locales/{{lng}}/{{ns}}.json",+      loadPath: "/locales/{{lng}}.json",
     },     },
   });   });
  
-export { i18n, resources };+export { i18n };
 ``` ```
 +
 +  * Passer cette configuration au ''Provider'' de react-i18next. Pour rester propre, nous allons créer un composant ''I18nextProvider''.
 +
 +```
 +// src/components/app/I18nextProvider/index.jsx
 +
 +import { I18nextProvider as Provider } from "react-i18next";
 +import { useEffect } from "react";
 +import { i18n } from "../../../i18n";
 +import { useSelector } from "react-redux";
 +
 +export const I18nextProvider = (props) => {
 +    const { children } = props;
 +
 +    const settings = useSelector(state => state.settings.data) ?? {};
 +    const { lng } = settings;  
 +
 +    useEffect(() => {
 +        i18n.changeLanguage(lng);
 +    }, [lng]);
 +
 +    return (
 +        <Provider i18n={i18n}>
 +            {children}
 +        </Provider>
 +    );
 +};
 +```
 +
 +Comme nous sommes au sein du ''ReduxProvider'', nous pouvons utiliser l'état global pour stocker des paramètres et notamment la langue. On doit alors créer un slice pour les paramètres, définir un état initial et des actions pour pouvoir les modifier. A vous de jouer !
 +
 +```
 +// src/App.jsx
 +
 +import { Router } from "./components/app/Router";
 +import { ReduxProvider } from "./components/app/ReduxProvider";
 +import { I18nextProvider } from "./components/app/I18nextProvider";
 +
 +export const App = () => {
 +    return (
 +        <ReduxProvider>
 +            <I18nextProvider>
 +                <Router />
 +            </I18nextProvider>
 +        </ReduxProvider>
 +    );
 +};
 +```
 +
 +Désormais les traductions sont accessibles dans n'importe quel fichier utilisé au sein du ''I18nextProvider''.
 +.
 +### Utiliser les traductions
 +
 +Pour traduire directement dans un composant, nous pouvons utiliser le hook ''useTranslation''.
 +
 +```
 +// src/components/pages/Login/index.jsx
 +
 +import { Input } from "../form/Input";
 +import { useDispatch } from "react-redux";
 +import { setSession } from "../../../redux";
 +import { API_URL } from "../../../utils/constants/vite";
 +import { useTranslation } from "react-i18next"; 
 +
 +export const Login = () => {
 +    const { t } = useTranslation();
 +
 +    const dispatch = useDispatch();
 +    
 +    const handleFormOnSubmit = (e) => {
 +        // request
 +    };
 +    
 +    return (
 +        <div className="fixed inset-0 bg-white flex justify-center items-center p-10">
 +            <form
 +                onSubmit={handleFormOnSubmit}
 +                className="flex flex-col gap-6"
 +            >
 +                <Input
 +                    id="email"
 +                    name="email"
 +                    label={t("LoginPage.emailInput.label")}
 +                    type="email"
 +                    placeholder={t("LoginPage.emailInput.placeholder")}
 +                />
 +                <Input
 +                    id="password"
 +                    name="password"
 +                    label={t("LoginPage.passwordInput.label")}
 +                    type="password"
 +                    placeholder={t("LoginPage.emailInput.placeholder")}
 +                />
 +                <button className="shadow-md bg-blue-500 text-white font-semibold text-xl uppercase tracking-wide rounded-full px-8 py-4 active:brightness-90 duration-100">
 +                    {t("LoginPage.button")}
 +                </button>
 +            </form>
 +        </div>
 +    );
 +};
 +```
 +
 +Pour ne pas à réécrire à chaque fois ''loginPage'', vous pouvez utiliser le système de prefix. Pour cela, veuillez vous référer à la documentaton de l'astuce **Utiliser les prefix avec useTranslation**