GitHub

Переменные компоненты позволяют безопасно включать динамический контент в компоненты <T>. Они выполняют форматирование и локализацию на стороне клиента, не отправляя данные в API перевода, что делает их идеальными для конфиденциальной информации, такой как имена пользователей, номера счетов и финансовые данные.

Доступные компоненты

<Var>: Динамический контент без форматирования
<Num>: Числа с форматированием по локали
<Currency>: Денежные суммы с символами и форматированием
<DateTime>: Даты и время по правилам локали

Быстрый старт

Компоненты переменных используются внутри <T> для работы с динамическим контентом:

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

function UserProfile({ user }) {
  return (
    <T>
      <p>Рады вас видеть снова, <Var>{user.name}</Var>!</p>
      <p>У вас <Num>{user.itemCount}</Num> элементов.</p>
      <p>Баланс: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Последний вход: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

Как работают переменные компоненты

Переменные компоненты решают проблему динамического контента за счет:

Оборачивания динамических значений, чтобы их можно было использовать внутри <T>
Локального форматирования с использованием встроенных в браузер i18n‑API
Сохранения конфиденциальности данных — содержимое никогда не отправляется в API перевода
Локализации на основе текущей локали пользователя

// ❌ Не работает: динамический контент внутри <T>
<T><p>Привет, {username}</p></T>

// ✅ Работает: динамический контент обёрнут
<T><p>Привет, <Var>{username}</Var></p></T>

Руководство по компонентам

`<Var>` — неформатированный динамический контент

Используйте <Var> для любого динамического контента, которому не нужно специальное форматирование:

// Сведения о пользователе
<T>
  <p>Здравствуйте, <Var>{user.name}</Var>!</p>
  <p>ID вашей учетной записи: <Var>{user.accountId}</Var></p>
</T>

// Условный рендеринг
<T>
  Панель управления: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` — форматирование чисел

Используйте <Num> для чисел, которые должны соответствовать правилам форматирования выбранной локали:

// Базовое форматирование чисел
<T>
  В вашей корзине <Num>{itemCount}</Num> товаров.
</T>

// Самостоятельное использование (эквивалент number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Настраиваемые параметры форматирования
<T>
  Расстояние: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> км
</T>

`<Currency>` — денежные суммы

Используйте <Currency> для отображения денежных сумм:

// Базовое форматирование валюты (по умолчанию — «USD»)
<T>
  Итого: <Currency>{total}</Currency>.
</T>

// Разные валюты
<T>
  Цена: <Currency currency="EUR">{price}</Currency>
</T>

// Произвольное форматирование
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` — даты и время

Используйте <DateTime> для работы с датами и временем:

// Базовое форматирование даты
<T>
  Заказ оформлен <DateTime>{orderDate}</DateTime>
</T>

// Форматирование времени
<T>
  Последнее обновление: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Пользовательский формат даты
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Конфиденциальность и безопасность

Данные остаются на стороне клиента

Компоненты переменных выполняют всё форматирование локально с использованием API Intl в браузере. Никакие динамические данные не отправляются в API перевода, что делает их идеальными для:

Имен пользователей и персональных данных
Номеров аккаунтов и идентификаторов
Финансовых данных и остатков/балансов
Закрытых (приватных) меток времени и дат

// Безопасно — конфиденциальные данные остаются на устройстве
<T>
  Баланс счёта: <Currency currency="USD">{balance}</Currency>
  Последний вход: <DateTime>{lastLoginTime}</DateTime>
</T>

Важное исключение

Будьте внимательны с вложенными компонентами <T> внутри компонентов-переменных:

// ⚠️ Содержимое внутри <T> БУДЕТ отправлено на перевод
<T>
  <Var>
    <T>Привет, мир!</T>  {/* Это будет переведено */}
    {privateData}         {/* Останется локальным */}
  </Var>
</T>

Автономное использование

Компоненты переменных можно использовать и вне <T> для чистого форматирования:

// Они работают как одноимённые методы .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // форматирование валюты
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Частые проблемы

Игнорирование параметров локализации

Для <Currency> обязательно передайте проп currency, чтобы указать тип валюты. Это гарантирует, что при отображении значения будут использованы корректные символ и форматирование валюты:

// ❌ По умолчанию используется USD — это может не соответствовать ожиданиям пользователей
<T>
  Товар стоит <Currency>{price}</Currency>
</T>

// ✅ Явно указывайте валюту
<T>
  Товар стоит <Currency currency="EUR">{price}</Currency>
</T>

У других компонентов тоже есть необязательные пропсы для настройки форматирования:

// Basic formatting
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> процент выполнения
</T>

// Date formatting
<T>
  Последнее обновление: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Дальнейшие шаги

Руководство по ветвлениям компонентов — Добавляйте условную логику в переводы
Руководство по переводу строк — Переводите обычный текст без JSX
Справочные материалы по API:
- Компонент <Var>
- Компонент <Num>
- Компонент <Currency>

Доступные компоненты

<Var>: Динамический контент без форматирования
<Num>: Числа с форматированием по локали
<Currency>: Денежные суммы с символами и форматированием
<DateTime>: Даты и время по правилам локали

Быстрый старт

Компоненты переменных используются внутри <T> для работы с динамическим контентом:

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

function UserProfile({ user }) {
  return (
    <T>
      <p>Рады вас видеть снова, <Var>{user.name}</Var>!</p>
      <p>У вас <Num>{user.itemCount}</Num> элементов.</p>
      <p>Баланс: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Последний вход: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

Как работают переменные компоненты

Переменные компоненты решают проблему динамического контента за счет:

Оборачивания динамических значений, чтобы их можно было использовать внутри <T>
Локального форматирования с использованием встроенных в браузер i18n‑API
Сохранения конфиденциальности данных — содержимое никогда не отправляется в API перевода
Локализации на основе текущей локали пользователя

// ❌ Не работает: динамический контент внутри <T>
<T><p>Привет, {username}</p></T>

// ✅ Работает: динамический контент обёрнут
<T><p>Привет, <Var>{username}</Var></p></T>

Руководство по компонентам

`<Var>` — неформатированный динамический контент

Используйте <Var> для любого динамического контента, которому не нужно специальное форматирование:

// Сведения о пользователе
<T>
  <p>Здравствуйте, <Var>{user.name}</Var>!</p>
  <p>ID вашей учетной записи: <Var>{user.accountId}</Var></p>
</T>

// Условный рендеринг
<T>
  Панель управления: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` — форматирование чисел

Используйте <Num> для чисел, которые должны соответствовать правилам форматирования выбранной локали:

// Базовое форматирование чисел
<T>
  В вашей корзине <Num>{itemCount}</Num> товаров.
</T>

// Самостоятельное использование (эквивалент number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Настраиваемые параметры форматирования
<T>
  Расстояние: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> км
</T>

`<Currency>` — денежные суммы

Используйте <Currency> для отображения денежных сумм:

// Базовое форматирование валюты (по умолчанию — «USD»)
<T>
  Итого: <Currency>{total}</Currency>.
</T>

// Разные валюты
<T>
  Цена: <Currency currency="EUR">{price}</Currency>
</T>

// Произвольное форматирование
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` — даты и время

Используйте <DateTime> для работы с датами и временем:

// Базовое форматирование даты
<T>
  Заказ оформлен <DateTime>{orderDate}</DateTime>
</T>

// Форматирование времени
<T>
  Последнее обновление: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Пользовательский формат даты
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Конфиденциальность и безопасность

Данные остаются на стороне клиента

Имен пользователей и персональных данных
Номеров аккаунтов и идентификаторов
Финансовых данных и остатков/балансов
Закрытых (приватных) меток времени и дат

// Безопасно — конфиденциальные данные остаются на устройстве
<T>
  Баланс счёта: <Currency currency="USD">{balance}</Currency>
  Последний вход: <DateTime>{lastLoginTime}</DateTime>
</T>

Важное исключение

Будьте внимательны с вложенными компонентами <T> внутри компонентов-переменных:

// ⚠️ Содержимое внутри <T> БУДЕТ отправлено на перевод
<T>
  <Var>
    <T>Привет, мир!</T>  {/* Это будет переведено */}
    {privateData}         {/* Останется локальным */}
  </Var>
</T>

Автономное использование

Компоненты переменных можно использовать и вне <T> для чистого форматирования:

// Они работают как одноимённые методы .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // форматирование валюты
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Частые проблемы

Игнорирование параметров локализации

// ❌ По умолчанию используется USD — это может не соответствовать ожиданиям пользователей
<T>
  Товар стоит <Currency>{price}</Currency>
</T>

// ✅ Явно указывайте валюту
<T>
  Товар стоит <Currency currency="EUR">{price}</Currency>
</T>

У других компонентов тоже есть необязательные пропсы для настройки форматирования:

// Basic formatting
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> процент выполнения
</T>

// Date formatting
<T>
  Последнее обновление: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Дальнейшие шаги

Руководство по ветвлениям компонентов — Добавляйте условную логику в переводы
Руководство по переводу строк — Переводите обычный текст без JSX
Справочные материалы по API:
- Компонент <Var>
- Компонент <Num>
- Компонент <Currency>

Доступные компоненты

<Var>: Динамический контент без форматирования
<Num>: Числа с форматированием по локали
<Currency>: Денежные суммы с символами и форматированием
<DateTime>: Даты и время по правилам локали

Быстрый старт

Компоненты переменных используются внутри <T> для работы с динамическим контентом:

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

function UserProfile({ user }) {
  return (
    <T>
      <p>Рады вас видеть снова, <Var>{user.name}</Var>!</p>
      <p>У вас <Num>{user.itemCount}</Num> элементов.</p>
      <p>Баланс: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Последний вход: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}

Как работают переменные компоненты

Переменные компоненты решают проблему динамического контента за счет:

Оборачивания динамических значений, чтобы их можно было использовать внутри <T>
Локального форматирования с использованием встроенных в браузер i18n‑API
Сохранения конфиденциальности данных — содержимое никогда не отправляется в API перевода
Локализации на основе текущей локали пользователя

// ❌ Не работает: динамический контент внутри <T>
<T><p>Привет, {username}</p></T>

// ✅ Работает: динамический контент обёрнут
<T><p>Привет, <Var>{username}</Var></p></T>

Руководство по компонентам

`<Var>` — неформатированный динамический контент

Используйте <Var> для любого динамического контента, которому не нужно специальное форматирование:

// Сведения о пользователе
<T>
  <p>Здравствуйте, <Var>{user.name}</Var>!</p>
  <p>ID вашей учетной записи: <Var>{user.accountId}</Var></p>
</T>

// Условный рендеринг
<T>
  Панель управления: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>

`<Num>` — форматирование чисел

Используйте <Num> для чисел, которые должны соответствовать правилам форматирования выбранной локали:

// Базовое форматирование чисел
<T>
  В вашей корзине <Num>{itemCount}</Num> товаров.
</T>

// Самостоятельное использование (эквивалент number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Настраиваемые параметры форматирования
<T>
  Расстояние: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> км
</T>

`<Currency>` — денежные суммы

Используйте <Currency> для отображения денежных сумм:

// Базовое форматирование валюты (по умолчанию — «USD»)
<T>
  Итого: <Currency>{total}</Currency>.
</T>

// Разные валюты
<T>
  Цена: <Currency currency="EUR">{price}</Currency>
</T>

// Произвольное форматирование
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>

`<DateTime>` — даты и время

Используйте <DateTime> для работы с датами и временем:

// Базовое форматирование даты
<T>
  Заказ оформлен <DateTime>{orderDate}</DateTime>
</T>

// Форматирование времени
<T>
  Последнее обновление: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Пользовательский формат даты
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>

Конфиденциальность и безопасность

Данные остаются на стороне клиента

Имен пользователей и персональных данных
Номеров аккаунтов и идентификаторов
Финансовых данных и остатков/балансов
Закрытых (приватных) меток времени и дат

// Безопасно — конфиденциальные данные остаются на устройстве
<T>
  Баланс счёта: <Currency currency="USD">{balance}</Currency>
  Последний вход: <DateTime>{lastLoginTime}</DateTime>
</T>

Важное исключение

Будьте внимательны с вложенными компонентами <T> внутри компонентов-переменных:

// ⚠️ Содержимое внутри <T> БУДЕТ отправлено на перевод
<T>
  <Var>
    <T>Привет, мир!</T>  {/* Это будет переведено */}
    {privateData}         {/* Останется локальным */}
  </Var>
</T>

Автономное использование

Компоненты переменных можно использовать и вне <T> для чистого форматирования:

// Они работают как одноимённые методы .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // форматирование валюты
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()

Частые проблемы

Игнорирование параметров локализации

// ❌ По умолчанию используется USD — это может не соответствовать ожиданиям пользователей
<T>
  Товар стоит <Currency>{price}</Currency>
</T>

// ✅ Явно указывайте валюту
<T>
  Товар стоит <Currency currency="EUR">{price}</Currency>
</T>

У других компонентов тоже есть необязательные пропсы для настройки форматирования:

// Basic formatting
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Custom formatting
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> процент выполнения
</T>

// Date formatting
<T>
  Последнее обновление: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>

Дальнейшие шаги

Руководство по ветвлениям компонентов — Добавляйте условную логику в переводы
Руководство по переводу строк — Переводите обычный текст без JSX
Справочные материалы по API:
- Компонент <Var>
- Компонент <Num>
- Компонент <Currency>

Переменные компоненты

На этой странице

Переменные компоненты

На этой странице

Переменные компоненты

На этой странице

GitHubПоставить звезду на GitHub

GitHubПоставить звезду на GitHub

Поставить звезду на GitHub

Поставить звезду на GitHub