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 17:02] – [Configurer i18next] paolofront:traductions [2025/09/29 17:10] (Version actuelle) – [Configurer i18next] paolo
Ligne 94: Ligne 94:
  
 ``` ```
 +// src/components/app/I18nextProvider/index.jsx
 +
 import { I18nextProvider as Provider } from "react-i18next"; import { I18nextProvider as Provider } from "react-i18next";
 +import { useEffect } from "react";
 import { i18n } from "../../../i18n"; import { i18n } from "../../../i18n";
 +import { useSelector } from "react-redux";
  
 export const I18nextProvider = (props) => { export const I18nextProvider = (props) => {
     const { children } = props;     const { children } = props;
 +
 +    const settings = useSelector(state => state.settings.data) ?? {};
 +    const { lng } = settings;  
 +
 +    useEffect(() => {
 +        i18n.changeLanguage(lng);
 +    }, [lng]);
  
     return (     return (
-      <Provider i18n={i18n}> +        <Provider i18n={i18n}> 
-        {children} +            {children} 
-      </Provider>+        </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 !
  
 ``` ```
Ligne 120: Ligne 133:
             <I18nextProvider>             <I18nextProvider>
                 <Router />                 <Router />
 +            </I18nextProvider>
         </ReduxProvider>         </ReduxProvider>
     );     );
Ligne 125: Ligne 139:
 ``` ```
  
-Comme nous avons "connecté" **i18next** à **React**, nous pouvons désormais utiliser les composants et hooks de **react-i18next**+Désormais les traductions sont accessibles dans n'importe quel fichier utilisé au sein du ''I18nextProvider''.
 . .
 ### Utiliser les traductions ### Utiliser les traductions