Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédente | |||
| front:traductions [2025/09/29 17:10] – [Configurer i18next] paolo | front:traductions [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1 | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | # Traductions | ||
| - | Documentation [i18next](https:// | ||
| - | Documentation [react-i18next](https:// | ||
| - | Documenation [Intl](https:// | ||
| - | |||
| - | 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' | ||
| - | . | ||
| - | ### Stocker un fichier de traduction | ||
| - | |||
| - | Les fichiers de traductions sont des fichiers JSON. Il y a deux moyens de les stocker selon la façon des les charger: | ||
| - | |||
| - | * Dans le dossier '' | ||
| - | * Dans le dossier '' | ||
| - | |||
| - | Nous ne traiterons ici la méthode " | ||
| - | ### Faire un fichier de traduction | ||
| - | |||
| - | Encore une fois, il y a deux méthodes pour organiser ses fichiers de traductions: | ||
| - | |||
| - | * un fichier par locale ('' | ||
| - | * un dossier par locale ('' | ||
| - | |||
| - | Nous ne traiterons ici la première méthode. Pour la seconde, veuillez vous référer la documentation de l' | ||
| - | |||
| - | Comme nous avons un fichier par langue qui doit potentiellement gérer plusieures pages, plusieurs composants, il s' | ||
| - | |||
| - | ``` | ||
| - | // public/ | ||
| - | |||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | ``` | ||
| - | |||
| - | ``` | ||
| - | // public/ | ||
| - | |||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | ``` | ||
| - | ### Configurer i18next | ||
| - | |||
| - | Pour cela, nous devons: | ||
| - | |||
| - | * Créer un fichier de configuration dans lequel nous avons besoin d' | ||
| - | |||
| - | ``` | ||
| - | // src/ | ||
| - | |||
| - | import i18n from " | ||
| - | import { initReactI18next } from " | ||
| - | import HttpBackend from " | ||
| - | |||
| - | i18n | ||
| - | .use(HttpBackend) | ||
| - | .use(initReactI18next) | ||
| - | .init({ | ||
| - | interpolation: | ||
| - | escapeValue: | ||
| - | }, | ||
| - | backend: { | ||
| - | loadPath: "/ | ||
| - | }, | ||
| - | }); | ||
| - | |||
| - | export { i18n }; | ||
| - | ``` | ||
| - | |||
| - | * Passer cette configuration au '' | ||
| - | |||
| - | ``` | ||
| - | // src/ | ||
| - | |||
| - | import { I18nextProvider as Provider } from " | ||
| - | import { useEffect } from " | ||
| - | import { i18n } from " | ||
| - | import { useSelector } from " | ||
| - | |||
| - | export const I18nextProvider = (props) => { | ||
| - | const { children } = props; | ||
| - | |||
| - | const settings = useSelector(state => state.settings.data) ?? {}; | ||
| - | const { lng } = settings; | ||
| - | |||
| - | useEffect(() => { | ||
| - | i18n.changeLanguage(lng); | ||
| - | }, [lng]); | ||
| - | |||
| - | return ( | ||
| - | < | ||
| - | {children} | ||
| - | </ | ||
| - | ); | ||
| - | }; | ||
| - | ``` | ||
| - | |||
| - | Comme nous sommes au sein du '' | ||
| - | |||
| - | ``` | ||
| - | // src/App.jsx | ||
| - | |||
| - | import { Router } from " | ||
| - | import { ReduxProvider } from " | ||
| - | import { I18nextProvider } from " | ||
| - | |||
| - | export const App = () => { | ||
| - | return ( | ||
| - | < | ||
| - | < | ||
| - | <Router /> | ||
| - | </ | ||
| - | </ | ||
| - | ); | ||
| - | }; | ||
| - | ``` | ||
| - | |||
| - | Désormais les traductions sont accessibles dans n' | ||
| - | . | ||
| - | ### Utiliser les traductions | ||
| - | |||
| - | Pour traduire directement dans un composant, nous pouvons utiliser le hook '' | ||
| - | |||
| - | ``` | ||
| - | // src/ | ||
| - | |||
| - | import { Input } from " | ||
| - | import { useDispatch } from " | ||
| - | import { setSession } from " | ||
| - | import { API_URL } from " | ||
| - | import { useTranslation } from " | ||
| - | |||
| - | export const Login = () => { | ||
| - | const { t } = useTranslation(); | ||
| - | |||
| - | const dispatch = useDispatch(); | ||
| - | | ||
| - | const handleFormOnSubmit = (e) => { | ||
| - | // request | ||
| - | }; | ||
| - | | ||
| - | return ( | ||
| - | <div className=" | ||
| - | <form | ||
| - | onSubmit={handleFormOnSubmit} | ||
| - | className=" | ||
| - | > | ||
| - | <Input | ||
| - | id=" | ||
| - | name=" | ||
| - | label={t(" | ||
| - | type=" | ||
| - | placeholder={t(" | ||
| - | /> | ||
| - | <Input | ||
| - | id=" | ||
| - | name=" | ||
| - | label={t(" | ||
| - | type=" | ||
| - | placeholder={t(" | ||
| - | /> | ||
| - | <button className=" | ||
| - | {t(" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | ); | ||
| - | }; | ||
| - | ``` | ||
| - | |||
| - | Pour ne pas à réécrire à chaque fois '' | ||