The <T> Component
How to internationalize JSX components using the <T> component
The <T> component 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.
Quick Start
Transform any static JSX content by wrapping it with <T>:
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>, use Variable Components and Branching Components.
Basic Usage
The <T> component accepts any JSX content as children:
// 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:
<T context="notification popup, not bread">
Click the toast to dismiss
</T>Setting Translation IDs
Use explicit IDs for consistent translations:
<T id="welcome-message">
Welcome back, user!
</T>When to Use <T>
Use <T> for static content only:
// ✅ Static content works
<T><button>Click here</button></T>
<T><h1>Welcome to our site</h1></T>
// ❌ Dynamic content breaks
<T><p>Hello {username}</p></T>
<T><p>Today is {new Date()}</p></T>
// ✅ Use Variable components for dynamic content
<T>
<p>Hello <Var>{username}</Var></p>
</T>Variable and Branching components are designed to work inside <T> for dynamic content. See Variable Components and Branching Components guides for details.
Examples
Simple Elements
// 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
// 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
// Combining static text with dynamic values
<T>
<p>Welcome back, <Var>{user.name}</Var>!</p>
</T>
// Form with mixed content
<T>
<label>
Email: <input type="email" placeholder="Enter your email" />
</label>
</T>Learn more about the <Var> component in the Variable Components Guide.
Production Setup
Build Process
Add translation to your build pipeline:
{
"scripts": {
"build": "npx gtx-cli 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.
Privacy Considerations
Content in <T> components is sent to the GT API for translation. For sensitive data, use Variable Components to keep private information local:
// Safe - sensitive data stays local
<T>
Welcome back, <Var>{username}</Var>
</T>Common Issues
Component Boundaries
<T> only translates direct children, not content inside other components:
// ❌ 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
// ❌ 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>. Wrap dynamic values with Variable components:
// ❌ Wrong - dynamic content breaks
<T><p>Hello {username}</p></T>
// ✅ Correct - use Variable components
<T><p>Hello <Var>{username}</Var></p></T>See the Variable Components Guide for handling dynamic values and the Branching Components Guide for conditional content.
Next Steps
- Variable Components Guide - Handle dynamic content within JSX translations
- Branching Components Guide - Add conditional logic to your translations
How is this guide?