<GTProvider>

Aperçu

Le composant <GTProvider> fournit le contexte General Translation (GT) à ses enfants, leur permettant d'accéder au contenu traduit. Il est requis pour toutes les traductions côté client de votre application.

Quand l'utiliser

Enveloppez toute votre application dans <GTProvider> pour activer les traductions côté client.
Lors du travail avec des dictionnaires, spécifiez optionnellement un id pour limiter les données du dictionnaire envoyées au client, optimisant les performances pour les gros dictionnaires.
Le composant <GTProvider> est utilisé à la fois pour les balises <T> inline et les dictionnaires.

Référence

Props

Prop	Type	Default
`id??`	`string`	`undefined`
`children?`	`ReactNode`	-

Description

Prop	Description
`children`	Tout composant ou les parents de tout composant qui doivent traduire ou accéder aux informations de traduction côté client. Ceux-ci doivent inclure tous les composants utilisant `<T>`, `useGT` ou d'autres utilitaires de traduction.
`id?`	L'ID d'un dictionnaire imbriqué pour limiter les données envoyées au client. Ceci est utile pour les grands projets avec des dictionnaires volumineux.

Retour

JSX.Element|undefined contenant les enfants qui ont été passés à ce composant.

Exemple

Utilisation de base

Enveloppez votre application dans <GTProvider> pour fournir le contexte de traduction à votre app.

layout.js

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider> // [!code highlight]
                    {children}
                </GTProvider> // [!code highlight]
            </body>
        </html>
    );
}

Utilisation de la prop `id` pour les sous-ensembles

Spécifiez la prop id pour optimiser les performances en envoyant seulement un sous-ensemble du dictionnaire au client.

layout.js

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider id="nested.dictionary.key"> // [!code highlight]
                    {children}
                </GTProvider>
            </body>
        </html>
    );
}

Notes

Le <GTProvider> doit envelopper tous les composants <T> et autres composants liés à la traduction dans les composants client. En savoir plus à ce sujet ici.
Pour les traductions côté serveur, <GTProvider> n'est pas requis mais peut toujours être utilisé.

Prochaines étapes

En savoir plus sur le composant <T> pour traduire du texte et des composants.
Consultez la documentation de withGTConfig() pour des options de personnalisation avancées.

<GTProvider>

Sur cette page