Обзор

Компонент <Num> выводит число в формате локали пользователя и может настраиваться с помощью параметров форматирования.

<Num>{100}</Num>
// Результат: 100

Все форматирование выполняется локально с использованием библиотеки Intl.NumberFormat.

Справочные материалы

Пропсы

Описание

Возвращает

JSX.Element, содержащий отформатированное число как строку.

Примеры

Базовый пример

В этом примере item.quantity будет переформатирован в соответствии с локалью пользователя.

import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

Указание локалей

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

import { Num } from 'gt-next';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> 
  );
}

Перевод компонентов <Num>

Предположим, вам нужно, чтобы число было частью более длинного переводимого предложения. Просто оберните соответствующий фрагмент в компоненты <T>.

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      Доступно <Num>{item.count}</Num> единиц. // [!code highlight]
    </T>
  );
}

Настраиваемое форматирование

<Num> использует библиотеку Intl.NumberFormat для форматирования.

import { Num } from 'gt-next';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}

Примечания

• Компонент <Num> используется для форматирования чисел в соответствии с локалью пользователя.
• Если вы используете <Num> внутри компонента <T>, обязательно оборачивайте все динамические числа в <Num>.

Следующие шаги

• Подробную информацию и примеры использования компонента <Num>, а также других компонент для переменных — <Currency>, <DateTime> и <Var>,