# gt-react: General Translation React SDK: Overview
URL: https://generaltranslation.com/en-GB/docs/react/introduction.mdx
---
title: Overview
description: Overview of General Translation's React SDK
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Introduction

The General Translation React SDK is an open-source internationalisation (i18n) library for React applications.

It provides a comprehensive set of tools to internationalise your React application in an easy, maintainable way, with feature parity with other popular i18n libraries.

The SDK can be used standalone without the General Translation platform and behaves similarly to other i18n libraries.

However, it also integrates with our platform to provide enhanced features:

* Translation hot reloading in development
* Automatic AI translations
* Syncing translations with the General Translation platform
* Native integration with our translation CDN

## Concepts

There are 5 main concepts to understand about the SDK.

<Steps>
  <Step>
    The [`<GTProvider>`](/docs/react/api/components/gtprovider) component
  </Step>

  <Step>
    The [`<T>`](/docs/react/api/components/t) component
  </Step>

  <Step>
    The [`useGT`](/docs/react/api/strings/use-gt) hook
  </Step>

  <Step>
    The [`msg`](/docs/react/api/strings/msg) function for shared strings
  </Step>

  <Step>
    (Optional) The [`useTranslations`](/docs/react/api/dictionary/use-translations) hook
  </Step>
</Steps>

## The `<GTProvider>` component

The [`<GTProvider>`](/docs/react/api/components/gtprovider) component provides your application with translation context, including the current language and relevant translations.

```tsx
import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* Your application content */}
      </div>
    </GTProvider>
  );
}
```

**Important:** The provider should wrap your entire application and be placed as high in the component tree as possible, such as in your root App component.

See the [`GTProvider`](/docs/react/api/components/gtprovider) API reference for more information.


## The `<T>` component

The [`<T>`](/docs/react/api/components/t) component is the recommended way to translate content in your application.

It is a React component that can be used to wrap any JSX element, and will automatically render the content of the element in a supported language.

<Callout type="info">
  We recommend using the [`<T>`](/docs/react/api/components/t) component wherever possible, as it provides the most flexibility for translations.

  Unlike strings, the [`<T>`](/docs/react/api/components/t) component can be used to translate HTML content, making it much more powerful than string translations.
</Callout>

### Examples

```tsx
<T>
  <div>Hello, world!</div>
</T>
```

```tsx
<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>
```

```tsx
<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

The [`<T>`](/docs/react/api/components/t) component works with [variable components](/docs/react/guides/variables) like [`<Num>`](/docs/react/api/components/num), [`<DateTime>`](/docs/react/api/components/datetime), and [`<Currency>`](/docs/react/api/components/currency) to format dynamic content.

See the [`<T>` component guide](/docs/react/guides/t) to learn about the different ways to use the [`<T>`](/docs/react/api/components/t) component.


## The `useGT` hook

The [`useGT`](/docs/react/api/strings/use-gt) hook is a React hook that can be used much like the [`<T>`](/docs/react/api/components/t) component, with some trade-offs.

The hook returns a function that can be used to translate strings.

```tsx
const gt = useGT();

gt('Hello, world!');
```

Compared to the [`<T>`](/docs/react/api/components/t) component, the [`useGT`](/docs/react/api/strings/use-gt) hook gives you more flexibility in your codebase.

For example, if you have a complex data structure with nested strings, a [`<T>`](/docs/react/api/components/t) component would be more difficult to use.

```tsx
const gt = useGT();
const data = {
  title: gt('Hello, world!'),
  description: gt('This is a description'),
};
```

See the [strings](/docs/react/guides/strings) guide to learn more about the [`useGT`](/docs/react/api/strings/use-gt) hook.


## The `msg` function

The [`msg`](/docs/react/api/strings/msg) function is used to mark strings for translation that are used across multiple components or stored in configuration objects.

This is particularly useful for shared content such as navigation labels, form messages, or any text that appears in multiple places throughout your application.

```tsx
// Mark strings for translation
import { msg } from 'gt-react';

const navItems = [
  { label: msg('Home'), href: '/' },
  { label: msg('About'), href: '/about' },
  { label: msg('Contact'), href: '/contact' }
];
```

```tsx
// Decode and use the marked strings
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```

The [`msg`](/docs/react/api/strings/msg) function encodes strings with translation metadata, and [`useMessages`](/docs/react/api/strings/use-messages) decodes them.

<Callout type="info">
  Use [`msg`](/docs/react/api/strings/msg) for shared content that needs to be translated consistently across your application. For component-specific content, prefer [`<T>`](/docs/react/api/components/t) or [`useGT`](/docs/react/api/strings/use-gt).
</Callout>

See the [shared strings](/docs/react/guides/shared-strings) guide to learn more about the `msg` function.


## The `useTranslations` hook

The [`useTranslations`](/docs/react/api/dictionary/use-translations) hook is a React hook that returns a function you can use to retrieve translations for a given key.

```tsx title="dictionary.ts"
const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};
```

```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```

This behaviour is similar to other translation libraries, such as [`react-i18next`](https://react.i18next.com/) and [`next-intl`](https://next-intl-docs.vercel.app/).

<Callout type="warn">
  We do not recommend using the [`useTranslations`](/docs/react/api/dictionary/use-translations) hook in your application. Frequent use of the [`useTranslations`](/docs/react/api/dictionary/use-translations) hook will make your codebase more difficult to maintain,
  and will lead to significant technical debt.

  Instead, we recommend using the [`<T>`](/docs/react/api/components/t) component or the [`useGT`](/docs/react/api/strings/use-gt) hook.

  If you are migrating from another i18n library, the [`useTranslations`](/docs/react/api/dictionary/use-translations) hook is a drop-in replacement and can be useful for migrating your codebase incrementally.
</Callout>

See the [dictionaries](/docs/react/guides/dictionaries) guide to learn more about the [`useTranslations`](/docs/react/api/dictionary/use-translations) hook.

See the [useTranslations API Reference](/docs/react/api/dictionary/use-translations) for more information.

***


## Next steps

* Learn how to set up your React project with the SDK: [Quickstart](/docs/react)
* Learn how to translate JSX content with the [`<T>`](/docs/react/api/components/t) component: [JSX Translation Guide](/docs/react/guides/t)
* Learn how to translate strings with the [`useGT`](/docs/react/api/strings/use-gt) hook: [String Translation Guide](/docs/react/guides/strings)
* Learn about shared strings with the [`msg`](/docs/react/api/strings/msg) function: [Shared Strings Guide](/docs/react/guides/shared-strings)