Обзор

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

<Num>{100}</Num>
// Вывод: 100

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

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

Свойства

Описание

Возвращает

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

Примеры

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

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

import { Num } from 'gt-react';

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

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

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

import { Num } from 'gt-react';

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

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

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

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

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

Индивидуальное форматирование

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

import { Num } from 'gt-react';

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

Примечания

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

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

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