<GTProvider>
<GTProvider>
uses React's Context (opens in a new tab) API to give its descendants access to translations and locale information.
<GTProvider>
should be placed at the top of the component tree so that all your components can use the useGT()
, useLocale()
, and useDefaultLocale()
hooks.
useGT()
: Used to initialize thet()
function, which loads a translation from the dictionary.useLocale()
: Retrieves the user's current language as an ISO-639 (opens in a new tab) language code.useDefaultLocale()
: Retrieves the application's default language as an ISO-639 language code.
Example
// App.js
import { GTProvider } from 'gt-react';
import MyApp from './MyApp';
export default function App() {
return (
<GTProvider
projectID="abc-123"
locales={["en-US", "es", "fr"]}
defaultLocale="en-US"
>
<MyApp />
</GTProvider>
);
}
Config
Pass props to <GTProvider>
to configure the behavior of gt-react
.
Recommended props
children
- Type:
React.ReactNode
- Description: The children components that will use the General Translation context. All components within
<GTProvider>
can access translation-related hooks such asuseGT
,useLocale
, anduseDefaultLocale
.
projectID
- Type:
string
- Description: The project ID used to identify your project on General Translation cloud services. It is required if you are using the default cloud services to fetch or cache translations.
dictionary
- Type:
Record<string, string | JSX.Element | [string | JSX.Element, Record<string, any>]>
- Default:
defaultDictionary
- Description: The dictionary object used for translations. This object contains all the translation entries for the project.
locales
- Type:
string[]
- Description: A list of locales that are supported by the application. If not provided, it will use the default locale.
defaultLocale
- Type:
string
- Default:
locales[0] || 'en'
- Description: The default locale to use for the application. This is the fallback language when no other locale is specified or detected. It can be the first item in the
locales
array or a custom value.
Advanced Props
locale
- Type:
string
- Description: The current locale for the application. If this prop is not provided, the
GTProvider
will attempt to detect the browser's locale viauseBrowserLocale()
and default todefaultLocale
if none is detected. Supply this prop only if you need to manually set the user's language.
dictionaryName
- Type:
string
- Default:
defaultDictionaryName
- Description: The name of the dictionary used for translation. Multiple dictionaries can be specified for different parts of your application or for different projects.
cacheURL
- Type:
string
- Default:
https://cache.gtx.dev
- Description: The URL where cached translations are fetched from. This is useful when using the General Translation cache server to retrieve pre-translated content for faster load times. You can customize this URL to point to your own caching server if needed.