# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/fr/docs/react/reference/components/gt-provider.mdx Docs index: https://generaltranslation.com/llms.txt Description: Fournit le contexte de traduction et de paramètre régional à une arborescence de composants React. Référence API du composant ``. Le contrat de `` dépend du framework et du router. Certains providers reçoivent les données de paramètre régional comme props, tandis que d’autres les résolvent et les chargent pour vous. *Remarque : les SPA React initialisées avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) utilisent le cache de traduction global et n’ont pas besoin de provider.* *Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`.* ## Vue d’ensemble [#overview] | Runtime | Props requises | Paramètre régional et source des traductions | | ----------------------------- | ------------------------ | ---------------------------------------------------------------------- | | Rendu côté serveur avec React | `locale`, `translations` | Votre loader côté serveur | | Next.js App Router | Aucune | La requête et le cache `gt-next` | | Next.js Pages Router | `locale`, `translations` | Wrappers de données du Pages Router | | TanStack Start | `locale`, `translations` | Votre loader de requête | | React Native | Aucune | Détection native du paramètre régional et translation loader configuré | La section [Props](#props) indique précisément quelles variantes de provider acceptent chaque prop. ## Contrats des frameworks [#contracts] Les applications `gt-react` rendues côté serveur transmettent le paramètre régional actif et un instantané de traduction. Chargez l’instantané après [`initializeGT`](/docs/react/reference/config#initialize). ```tsx import { GTProvider } from 'gt-react'; ``` [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) et les identifiants doivent être fournis dans l’[appel d’initialisation](/docs/react/reference/config#initialization), et non au provider. **Modifié dans la v11 :** le `` de `gt-react` n’accepte plus `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) ni les identifiants. Déplacez-les vers [`initializeGT`](/docs/react/reference/config#initialize), puis transmettez au provider les valeurs résolues de `locale` et `translations`. ### App Router Le provider App Router est un composant serveur async qui n’accepte que la prop `children`. Il détermine le paramètre régional, la région, l’état des traductions, les traductions et les dictionnaires à partir de la requête et du cache `gt-next`. ```tsx title="app/layout.tsx" import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return {children}; } ``` Ne transmettez pas `locale`, `translations`, `dictionaries`, `region` ni `enableI18n` au provider App Router. ### Pages Router Le Pages Router réexporte le provider partagé de `gt-react`. Transmettez les valeurs injectées via le [rendu côté serveur](/docs/react/nextjs-pages-router-quickstart#quickstart) ou la [génération statique](/docs/react/nextjs/pages-router-static-site-generation), et fournissez `_reload` lorsque les changements de paramètre régional doivent utiliser le routage de Next.js. ```tsx title="pages/_app.tsx" import Router from 'next/router'; import { GTProvider } from 'gt-next'; { void Router.push(Router.pathname, Router.asPath, { locale }); }} > ``` `gt-tanstack-start` réexporte le provider partagé. Transmettez le paramètre régional actif et son instantané de traduction après avoir enregistré [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware). ```tsx import { GTProvider } from 'gt-tanstack-start'; ``` Le provider React Native détecte le paramètre régional initial, charge les traductions correspondantes et effectue un nouveau rendu lorsque le paramètre régional change. `locale` est facultatif et `translations` n’est pas une prop publique. ```tsx import { GTProvider } from 'gt-react-native'; ``` Transmettez `fallback` pour remplacer l’indicateur de chargement intégré pendant le chargement des traductions. ## Fonctionnement [#how-it-works] * **React, TanStack Start et Next.js Pages Router.** Le provider reçoit dès le départ un instantané de traduction, ce qui permet d’afficher le contenu traduit de manière synchrone. * **Next.js App Router.** Le provider côté serveur lit l’état de la requête et charge les traductions et les dictionnaires avant d’afficher sa limite client. * **React Native.** Le provider charge les traductions correspondant au paramètre régional résolu via Suspense. Il affiche le contenu de secours jusqu’à ce qu’elles soient disponibles. * **Contexte pour l’arborescence.** Les descendants lisent le paramètre régional actif, les traductions, les dictionnaires, la région et l’état des traductions depuis le contexte du provider. * **Changements de paramètre régional.** Les providers web conservent le paramètre régional dans un cookie et déclenchent leur mécanisme de rechargement. React Native le conserve dans le stockage natif et met à jour l’état du provider. ## Props [#props] | Prop | Description | Type | Facultatif | Par défaut | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------- | ---------------------------------------------------------------- | | [`children`](#children) | Arborescence de composants. Accepté par chaque provider. | `ReactNode` | Oui | — | | [`locale`](#locale) | Paramètre régional actif. Obligatoire pour React, TanStack Start et Next.js Pages Router ; facultatif dans React Native ; non accepté dans Next.js App Router. | `string \| LocaleCandidates` | Spécifique au framework | Paramètre régional de l’appareil ou enregistré dans React Native | | [`translations`](#translations) | Instantané de traduction. Obligatoire pour React, TanStack Start et Next.js Pages Router ; non accepté dans Next.js App Router ou React Native. | `object` | Spécifique au framework | — | | [`dictionaries`](#dictionaries) | Dictionnaires par paramètre régional. Acceptés par React, TanStack Start, Next.js Pages Router et React Native ; chargés en interne dans Next.js App Router. | `object` | Oui | — | | [`region`](#region) | Région active. Acceptée par React, TanStack Start, Next.js Pages Router et React Native ; résolue en interne dans Next.js App Router. | `string` | Oui | Région enregistrée ou `undefined` | | [`enableI18n`](#enable-i18n) | Indique s’il faut traduire. Accepté par React, TanStack Start, Next.js Pages Router et React Native ; résolu en interne dans Next.js App Router. | `boolean` | Oui | `true` | | [`fallback`](#fallback) | Contenu affiché pendant que React Native récupère les traductions. React Native uniquement. | `ReactNode` | Oui | Indicateur de chargement | | [`_reload`](#reload) | Callback de rechargement du framework. Accepté par React, TanStack Start et Next.js Pages Router ; non accepté par Next.js App Router ou React Native. | `(state) => void` | Oui | Spécifique au framework | | [`onMissingTranslation`](#missing-translation) | Gère une traduction inline ou JSX manquante. Non accepté par Next.js App Router. | `OnMissingTranslation` | Oui | — | | [`onMissingDictionaryEntry`](#missing-dictionary-entry) | Gère une entrée de dictionnaire manquante. Non accepté par Next.js App Router. | `OnMissingDictionaryEntry` | Oui | — | | [`onMissingDictionaryObj`](#missing-dictionary-object) | Gère un objet dictionnaire manquant. Non accepté par Next.js App Router. | `OnMissingDictionaryObj` | Oui | — | ### `children` [#children] **Type** `ReactNode` · **Facultatif** L’arborescence de composants qui reçoit le contexte de traduction. Chaque variante de provider accepte `children`. ### `locale` [#locale] **Type** `string | LocaleCandidates` · **Spécifique au framework** Le paramètre régional actif de l’arborescence : * Obligatoire sous la forme d’une `string` résolue dans React, TanStack Start et le Pages Router de Next.js. * Facultatif dans React Native, où il accepte des candidats de paramètres régionaux et utilise par défaut le paramètre régional enregistré ou celui de l’appareil. * Non accepté par le provider de l’App Router de Next.js, qui résout en interne le paramètre régional de la requête. Récupérez le résultat plus bas dans l’arborescence avec [`useLocale`](/docs/react/reference/hooks/use-locale). ### `translations` [#translations] **Type** `Record>` · **Spécifique au framework** Un instantané de traduction généré par [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot). Il est requis dans React, TanStack Start et Next.js Pages Router pour permettre à ces providers de résoudre le contenu de manière synchrone. Le provider Next.js App Router charge l’instantané en interne. Le provider React Native n’accepte pas de prop `translations` et charge lui-même les traductions du paramètre régional actif. ### `dictionaries` [#dictionaries] **Type** `Record` · **Facultatif** Dictionnaires par paramètre régional utilisés par [`useTranslations`](/docs/react/reference/hooks/use-translations) pour les recherches par id. React, TanStack Start, Next.js Pages Router et React Native acceptent cette prop. Le provider Next.js App Router charge les dictionnaires en interne. ### `region` [#region] **Type** `string` · **Facultatif** Le code de région actif, tel que `US` ou `GB`. React, TanStack Start, Next.js Pages Router et React Native acceptent cette prop. Next.js App Router détermine la région à partir de la requête. ### `enableI18n` [#enable-i18n] **Type** `boolean` · **Facultatif** · **Par défaut** `true` Détermine si le contenu doit être traduit. Lorsque `false`, le provider affiche le contenu dans le paramètre régional source. React, TanStack Start, Next.js Pages Router et React Native acceptent cette prop. Next.js App Router résout la valeur à partir de l’état de la requête. ### `fallback` [#fallback] **Type** `ReactNode` · **Facultatif** Contenu réservé à React Native affiché pendant le chargement des traductions. Par défaut, il s’agit d’un `ActivityIndicator` React Native centré. ### `_reload` [#reload] **Type** `(state: { locale: string; region: string | undefined; enableI18n: boolean }) => void` · **Facultatif** · **Par défaut** Selon le framework Callback exécuté après un changement de paramètre régional web, de région ou d’état de traduction. React et TanStack Start l’acceptent via le provider partagé. Next.js Pages Router l’utilise pour remplacer le rechargement complet d’une page par `Router.push`. `gt-react` standard et Next.js Pages Router utilisent par défaut `window.location.reload`. TanStack Start fournit une navigation basée sur le pathname lorsque le routage par paramètre régional est activé. Le provider Next.js App Router fournit son propre callback et n’accepte pas cette prop : il appelle normalement `router.refresh`, mais recharge le document lorsque le middleware doit supprimer un préfixe de paramètre régional non par défaut après le passage au paramètre régional par défaut. React Native met plutôt à jour l’état du provider. ### `onMissingTranslation` [#missing-translation] **Type** `OnMissingTranslation` · **Facultatif** Callback avancé appelé lorsqu’une traduction inline ou JSX est manquante. Les providers pour navigateur et React Native peuvent utiliser un callback fourni. Les providers rendus côté serveur installent leur propre gestionnaire. ### `onMissingDictionaryEntry` [#missing-dictionary-entry] **Type** `OnMissingDictionaryEntry` · **Facultatif** Callback avancé appelé lorsqu’une entrée de dictionnaire est introuvable. Les providers pour navigateur et React Native peuvent utiliser un callback fourni. Les providers rendus côté serveur installent leur propre gestionnaire. ### `onMissingDictionaryObj` [#missing-dictionary-object] **Type** `OnMissingDictionaryObj` · **Facultatif** Callback avancé appelé lorsqu’un objet de dictionnaire est introuvable. Les providers pour navigateur et React Native peuvent utiliser le callback fourni. Les providers rendus côté serveur installent leur propre gestionnaire. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.