# gt-react: General Translation React SDK: The T Component
URL: https://generaltranslation.com/en-US/docs/react/guides/t.mdx
---
title: The T Component
description: How to internationalize JSX components using the T component
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


The [`<T>` component](/docs/react/api/components/t) is the primary tool for internationalizing JSX content in your React application. It wraps your JSX elements and automatically translates them based on the user's locale.

<Callout>
  **Tip:** With [auto JSX injection](/docs/cli/features/auto-jsx-injection) enabled, the compiler can automatically wrap your JSX in translation components at build time.
  You may not need to add `<T>` manually in most cases. Manual `<T>` is still useful when you need fine-grained control, such as setting a specific `id` or `context`.
</Callout>

## Quickstart

Transform any static JSX content by wrapping it with [`<T>`](/docs/react/api/components/t):

```jsx
import { T } from 'gt-react';

// Before
function Greeting() {
  return <p>Hello, world!</p>;
}

// After
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

For dynamic content within [`<T>`](/docs/react/api/components/t), use [Variable Components](/docs/react/guides/variables) and [Branching Components](/docs/react/guides/branches).

## Basic usage

The [`<T>` component](/docs/react/api/components/t) accepts any JSX content as children:

```jsx
// Simple text
<T>Welcome to our app</T>

// HTML elements
<T><h1>Page Title</h1></T>

// Complex nested JSX
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```

## Configuration options

### Adding context

Provide translation context for ambiguous terms:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```

## When to use T

Use [`<T>`](/docs/react/api/components/t) for **static content only**:

```jsx
// ✅ Static content works
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ Dynamic content breaks
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Use Variable components for dynamic content
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Variable and Branching components are designed to work inside [`<T>`](/docs/react/api/components/t) for dynamic content.
  See [Variable Components](/docs/react/guides/variables) and [Branching Components](/docs/react/guides/branches) guides for details.
</Callout>

## Examples

### Simple elements
```jsx
// Basic text
<T>Hello, world!</T>

// Button with text
<T><Button>Submit Form</Button></T>

// Heading with styling
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```

### Complex components
```jsx
// Navigation menu
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Alert message
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```

### With variables

You can use variable components for localized formatting.

```jsx
// Combining static text with dynamic values
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Learn more about the [`<Var>` component](/docs/react/api/components/var) in the [Variable Components Guide](/docs/react/guides/variables).
</Callout>

## Production setup

### Build process
Add translation to your build pipeline:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```

### Development vs production behavior
- **Development**: With a dev API key, translations happen on-demand when components render. You'll see real-time translation as you develop.
- **Production**: All translations are pre-built during the build stage and will be visible once your application is live.

Set your development API key in your environment to enable live translation during development. You can create one in the Dashboard under [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Privacy considerations
Content in [`<T>`](/docs/react/api/components/t) components is sent to the GT API for translation. For sensitive data, use [Variable Components](/docs/react/guides/variables) to keep private information local:

```jsx
// Safe - sensitive data stays local
<T>
  Welcome back, <Var>{username}</Var>
</T>
```

## How much to wrap in a single `<T>`

Wrap **logical content blocks** — content that a translator would naturally read and translate together.

```jsx
// ✅ Good — related content wrapped together gives translators full context
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Good — each card is an independent unit
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Too narrow — fragments the translation, loses context
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Too wide — wrapping your entire page makes it harder to maintain
<T>
  {/* ...hundreds of lines of JSX... */}
</T>
```

**Rule of thumb:** if text is visually or semantically related, wrap it in one `<T>`. Only split when content is genuinely independent (e.g., a header vs. a footer).

Wrapping more content in a single `<T>` gives translators better context, which produces more natural translations — some languages restructure sentences or need to reference nearby content.

## Common issues

### Component boundaries
[`<T>`](/docs/react/api/components/t) only translates direct children, not content inside other components:

```jsx
// ❌ Wrong - content inside components won't be translated
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* Content inside won't be translated */}
</T>

// ✅ Correct - wrap each component individually
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</h1></T>
<MyComponent />
```

### Nesting T components

```jsx
// ❌ Don't nest <T> components
<T>
  <T>Hello world</T> {/* Don't do this */}
</T>
```

### Dynamic content errors
The CLI will error on dynamic content in [`<T>`](/docs/react/api/components/t). Wrap dynamic values with Variable components:

```jsx
// ❌ Wrong - dynamic content breaks
<T><p>Hello {username}</p></T>

// ✅ Correct - use Variable components
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  See the [Variable Components Guide](/docs/react/guides/variables) for handling dynamic values and the [Branching Components Guide](/docs/react/guides/branches) for conditional content.
</Callout>

## Next steps

<Callout>
  **See it in action:** Check out the [`<T>` component basics example app](https://github.com/gt-examples/t-component-basics) for a working demo — [live preview](https://t-component-basics.generaltranslation.dev).
</Callout>

- [Variable Components Guide](/docs/react/guides/variables) - Handle dynamic content within JSX translations
- [Branching Components Guide](/docs/react/guides/branches) - Add conditional logic to your translations