Components
<GTProvider>
API Reference for the <GTProvider> component
Overview
The <GTProvider> component provides General Translation (GT) context to its children, enabling them to access translated content.
It is required for any client-side translations on your application.
When to Use
- Wrap your entire application in
<GTProvider>to enable translations on the client. - When working with dictionaries, optionally specify an
idto limit the dictionary data sent to the client, optimizing performance for large dictionaries. - The
<GTProvider>component is used for both inline<T>and dictionaries.
Reference
Props
Prop
Type
Description
| Prop | Description |
|---|---|
children | Any component or the parents of any component that needs to translate or access translation information on the client side. These should include any components using <T>, useGT, or other translation utilities. |
id? | The ID of a nested dictionary to limit the data sent to the client. This is useful for large projects with extensive dictionaries. |
Returns
JSX.Element|undefined containing the children that were passed to this component.
Example
Basic Usage
Wrap your application in <GTProvider> to provide translation context to your app.
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}Using the id Prop for Subsets
Specify the id prop to optimize performance by sending only a subset of the dictionary to the client.
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
- The
<GTProvider>must wrap all<T>components and other translation-related components in client components. Read more about it here. - For server-side translations,
<GTProvider>is not required but can still be used.
Next Steps
- Learn more about the
<T>component for translating text and components. - See withGTConfig() docs for advanced customization options.
How is this guide?