Différences

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

--- front:traductions [2025/09/29 16:58] – [Configurer i18next] paolo
+++ front:traductions [2025/09/29 17:10] (Version actuelle) – [Configurer i18next] paolo
@@ Ligne 93: / Ligne 93: @@
   * 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";
-Comme nous avons "connecté" **i18next** à **React**, nous pouvons désormais utiliser les composants et hooks de **react-i18next**
+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