# General Translation React SDKs (gt-react, gt-next, gt-react-native): Overview
URL: https://generaltranslation.com/en-GB/docs/react/overview.mdx
---

title: Overview
description: Learn which React library and quickstart fit your framework.

---

General Translation's React internationalisation libraries share components, hooks, and configuration across React SPAs, Next.js App Router, Next.js Pages Router, TanStack Start, and React Native.

This is the landing page for the React section. Read on to understand the ecosystem and pick your framework, then follow the matching quickstart.

## The React ecosystem [#ecosystem]

Each framework family has its own package:

* `gt-react` — for server-rendered React apps and single-page apps (SPAs), such as Vite or Create React App. See the [React Quickstart](/docs/react/react-quickstart) or [React SPA Quickstart](/docs/react/react-spa-quickstart).
* `gt-next` — for Next.js App Router and Pages Router apps. See the [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) or [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart).
* `gt-tanstack-start` — for TanStack Start apps. See the [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart).
* `gt-react-native` — for React Native apps, including Expo and the bare React Native CLI. See the [React Native Quickstart](/docs/react/react-native-quickstart).

*Note:* `gt-tanstack-start` and `gt-react-native` are experimental. Review their quickstarts for current limitations before choosing either one.

## Shared translation model [#shared-model]

Because every React i18n library shares the same core components and hooks, there is one translation model to learn. The important parts are:

* [`<T>`](/docs/react/reference/components/t) **component.** Wrap any JSX in [`<T>`](/docs/react/reference/components/t) to translate it in place, including nested elements and formatting. [`<T>`](/docs/react/reference/components/t) translates its contents as a single unit.
* [`useGT`](/docs/react/reference/hooks/use-gt) **hook.** Translate standalone strings — placeholders, `aria-label` values, alt text — with the function it returns. Call it as `const gt = useGT();`, then `gt('Hello, world!')`. In async App Router components, use [`getGT`](/docs/react/nextjs/reference/functions/get-gt) from `gt-next/server`.
* [`GTProvider`](/docs/react/reference/components/gt-provider) **component.** Wrap your app so components can access translations and the active locale. How you supply translations to it differs slightly by framework, which is why each has its own quickstart.
* `gt` **CLI.** The `gt` package generates and downloads translations. Its [`gt.config.json`](/docs/cli/reference/config) file declares your `defaultLocale`, target `locales`, and translation output paths. Run [`npx gt translate`](/docs/cli/reference/commands/translate) to translate your project through the General Translation API.

Variable components ([`<Var>`](/docs/react/reference/components/var), [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency), and [`<DateTime>`](/docs/react/reference/components/datetime)) are also shared, along with [`<Plural>`](/docs/react/reference/components/plural), [`<Branch>`](/docs/react/reference/components/branch), [`<Derive>`](/docs/react/reference/components/derive), and locale hooks such as [`useLocale`](/docs/react/reference/hooks/use-locale).

## Choose your framework [#frameworks]

Each setup uses the same translation components and CLI, but initialisation and translation delivery differ. Start with the quickstart for your framework:

* **Building a server-rendered React app:** initialise `gt-react`, load translations on the server, and hydrate [`GTProvider`](/docs/react/reference/components/gt-provider). See the [React Quickstart](/docs/react/react-quickstart).
* **Building a React SPA (Vite, Create React App):** initialise `gt-react` in the browser before rendering. See the [React SPA Quickstart](/docs/react/react-spa-quickstart).
* **Building a Next.js App Router app:** add the `withGTConfig` plugin and use [`<T>`](/docs/react/reference/components/t) in server and client components. See the [Next.js App Router Quickstart](/docs/react/nextjs-quickstart).
* **Building a Next.js Pages Router app:** load the locale and translations via page props. See the [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart).
* **Building a TanStack Start app:** initialise General Translation in `src/router.tsx` and hydrate [`GTProvider`](/docs/react/reference/components/gt-provider) from the root route loader. See the [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart).
* **Building a React Native app:** initialise in your entry point and add the Babel plugin for polyfills. See the [React Native Quickstart](/docs/react/react-native-quickstart).

Once you are set up, the [Guides](/docs/react/guides/configuring) cover shared workflows — translating JSX and strings, formatting variables, plurals, dictionaries, and managing locales — and the [Reference](/docs/react/reference/config) documents every component, hook, function, and config option. Both apply to all frameworks, with per-framework differences shown in tabs.