GitHub

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

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

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

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

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

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

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>

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

// Базовое форматирование
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Пользовательское форматирование
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> степень выполнения
</T>

// Форматирование даты
<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-react';

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>

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

// Базовое форматирование
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Пользовательское форматирование
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> степень выполнения
</T>

// Форматирование даты
<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-react';

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>

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

// Базовое форматирование
<T>
  <Num>{count}</Num> товаров в наличии
</T>

// Пользовательское форматирование
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> степень выполнения
</T>

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

Дальше

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

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

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

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

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

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

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

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

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

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

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