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 16:41] – [Configurer i18next] 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 [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 65: Ligne 65:
 ### Configurer i18next ### Configurer i18next
  
-Pour configurer i18n, 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**.+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**.
  
 ``` ```
Ligne 89: Ligne 91:
 ``` ```
  
-Comme nous avons "connecté" **i18next** à **React**, nous pouvons désormais utiliser les composants et hooks de **react-i18next**.+  * 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 ### Utiliser les traductions
  
Ligne 96: Ligne 146:
  
 ``` ```
 +// 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**