GitHub

Variable components allow you to safely include dynamic content within <T> components. They handle formatting and localization locally without sending data to the translation API, making them perfect for sensitive information like usernames, account numbers, and financial data.

Available Components

<Var>: Raw dynamic content without formatting
<Num>: Numbers with locale-specific formatting
<Currency>: Currency values with symbols and formatting
<DateTime>: Dates and times with locale conventions

Quick Start

Variable components work inside <T> to handle dynamic content:

import { T, Var, Num, Currency, DateTime } from 'gt-next';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

How Variable Components Work

Variable components solve the dynamic content problem by:

Wrapping dynamic values so they can be used inside <T>
Handling formatting locally using the browser's built-in i18n APIs
Keeping data private - content is never sent to the translation API
Providing localization based on the user's current locale

// ❌ This breaks - dynamic content in <T>
<T><p>Hello {username}</p></T>

// ✅ This works - dynamic content wrapped
<T><p>Hello <Var>{username}</Var></p></T>

Component Guide

`<Var>` - Raw Dynamic Content

Use <Var> for any dynamic content that doesn't need special formatting:

// User information
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Conditional rendering
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` - Formatted Numbers

Use <Num> for numbers that should follow locale formatting rules:

// Basic number formatting
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Standalone usage (equivalent to number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Custom formatting options
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>

`<Currency>` - Money Values

Use <Currency> for monetary amounts:

// Basic currency formatting (defaults to "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Different currencies
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Custom formatting
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` - Dates and Times

Use <DateTime> for dates and times:

// Basic date formatting
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Time formatting
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Custom date format
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Privacy and Security

Data Stays Local

Variable components handle all formatting locally using the browser's Intl APIs. No dynamic content is sent to the translation API, making them perfect for:

User names and personal information
Account numbers and IDs
Financial data and balances
Private timestamps and dates

// Safe - sensitive data stays local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>

Important Exception

Be careful with nested <T> components inside variable components:

// ⚠️ The inner <T> content WILL be sent for translation
<T>
  <Var>
    <T>Hello, world!</T>  {/* This gets translated */}
    {privateData}         {/* This stays local */}
  </Var>
</T>

Standalone Usage

Variable components can be used outside of <T> for pure formatting:

// These work like their respective .toLocale*() methods
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // price formatting
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Common Issues

Ignoring Localization Options

For <Currency>, make sure to pass the currency prop to specify the currency type. This ensures that the correct currency symbol and formatting are used when displaying the value:

// ❌ Defaults to USD - may not be what users expect
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Explicitly specify the currency
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>

Other components also have optional props that allow you to customize the formatting:

// Basic formatting
<T>
  <Num>{count}</Num> items in stock
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

// Date formatting
<T>
  Last updated: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Next Steps

Branching Components Guide - Add conditional logic to your translations
String Translation Guide - Translate plain text without JSX
API References:

Available Components

<Var>: Raw dynamic content without formatting
<Num>: Numbers with locale-specific formatting
<Currency>: Currency values with symbols and formatting
<DateTime>: Dates and times with locale conventions

Quick Start

Variable components work inside <T> to handle dynamic content:

import { T, Var, Num, Currency, DateTime } from 'gt-next';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

How Variable Components Work

Variable components solve the dynamic content problem by:

Wrapping dynamic values so they can be used inside <T>
Handling formatting locally using the browser's built-in i18n APIs
Keeping data private - content is never sent to the translation API
Providing localization based on the user's current locale

// ❌ This breaks - dynamic content in <T>
<T><p>Hello {username}</p></T>

// ✅ This works - dynamic content wrapped
<T><p>Hello <Var>{username}</Var></p></T>

Component Guide

`<Var>` - Raw Dynamic Content

Use <Var> for any dynamic content that doesn't need special formatting:

// User information
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Conditional rendering
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` - Formatted Numbers

Use <Num> for numbers that should follow locale formatting rules:

// Basic number formatting
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Standalone usage (equivalent to number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Custom formatting options
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>

`<Currency>` - Money Values

Use <Currency> for monetary amounts:

// Basic currency formatting (defaults to "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Different currencies
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Custom formatting
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` - Dates and Times

Use <DateTime> for dates and times:

// Basic date formatting
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Time formatting
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Custom date format
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Privacy and Security

Data Stays Local

Variable components handle all formatting locally using the browser's Intl APIs. No dynamic content is sent to the translation API, making them perfect for:

User names and personal information
Account numbers and IDs
Financial data and balances
Private timestamps and dates

// Safe - sensitive data stays local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>

Important Exception

Be careful with nested <T> components inside variable components:

// ⚠️ The inner <T> content WILL be sent for translation
<T>
  <Var>
    <T>Hello, world!</T>  {/* This gets translated */}
    {privateData}         {/* This stays local */}
  </Var>
</T>

Standalone Usage

Variable components can be used outside of <T> for pure formatting:

// These work like their respective .toLocale*() methods
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // price formatting
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Common Issues

Ignoring Localization Options

For <Currency>, make sure to pass the currency prop to specify the currency type. This ensures that the correct currency symbol and formatting are used when displaying the value:

// ❌ Defaults to USD - may not be what users expect
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Explicitly specify the currency
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>

Other components also have optional props that allow you to customize the formatting:

// Basic formatting
<T>
  <Num>{count}</Num> items in stock
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

// Date formatting
<T>
  Last updated: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Next Steps

Branching Components Guide - Add conditional logic to your translations
String Translation Guide - Translate plain text without JSX
API References:

Available Components

<Var>: Raw dynamic content without formatting
<Num>: Numbers with locale-specific formatting
<Currency>: Currency values with symbols and formatting
<DateTime>: Dates and times with locale conventions

Quick Start

Variable components work inside <T> to handle dynamic content:

import { T, Var, Num, Currency, DateTime } from 'gt-next';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

How Variable Components Work

Variable components solve the dynamic content problem by:

Wrapping dynamic values so they can be used inside <T>
Handling formatting locally using the browser's built-in i18n APIs
Keeping data private - content is never sent to the translation API
Providing localization based on the user's current locale

// ❌ This breaks - dynamic content in <T>
<T><p>Hello {username}</p></T>

// ✅ This works - dynamic content wrapped
<T><p>Hello <Var>{username}</Var></p></T>

Component Guide

`<Var>` - Raw Dynamic Content

Use <Var> for any dynamic content that doesn't need special formatting:

// User information
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Conditional rendering
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` - Formatted Numbers

Use <Num> for numbers that should follow locale formatting rules:

// Basic number formatting
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Standalone usage (equivalent to number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Custom formatting options
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>

`<Currency>` - Money Values

Use <Currency> for monetary amounts:

// Basic currency formatting (defaults to "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Different currencies
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Custom formatting
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` - Dates and Times

Use <DateTime> for dates and times:

// Basic date formatting
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Time formatting
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Custom date format
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Privacy and Security

Data Stays Local

Variable components handle all formatting locally using the browser's Intl APIs. No dynamic content is sent to the translation API, making them perfect for:

User names and personal information
Account numbers and IDs
Financial data and balances
Private timestamps and dates

// Safe - sensitive data stays local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>

Important Exception

Be careful with nested <T> components inside variable components:

// ⚠️ The inner <T> content WILL be sent for translation
<T>
  <Var>
    <T>Hello, world!</T>  {/* This gets translated */}
    {privateData}         {/* This stays local */}
  </Var>
</T>

Standalone Usage

Variable components can be used outside of <T> for pure formatting:

// These work like their respective .toLocale*() methods
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // price formatting
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Common Issues

Ignoring Localization Options

For <Currency>, make sure to pass the currency prop to specify the currency type. This ensures that the correct currency symbol and formatting are used when displaying the value:

// ❌ Defaults to USD - may not be what users expect
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Explicitly specify the currency
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>

Other components also have optional props that allow you to customize the formatting:

// Basic formatting
<T>
  <Num>{count}</Num> items in stock
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

// Date formatting
<T>
  Last updated: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Next Steps

Branching Components Guide - Add conditional logic to your translations
String Translation Guide - Translate plain text without JSX
API References:

Variable Components

On this page

Variable Components

On this page

Variable Components

On this page