Обзор

Компонент <Currency> отображает числовое значение как денежную сумму. Число форматируется в соответствии с текущей локалью и переданными необязательными параметрами. Компонент отвечает только за форматирование и не выполняет конвертацию валют или расчёт обменных курсов.

<Currency>{100}</Currency>
// Результат: $100.00

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

Справка

Пропсы

Описание

Возвращает

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

Примеры

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

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

import { Currency } from 'gt-react'; 

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> 
    );
}

Указание валюты

Здесь мы выводим цену в евро.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

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

Допустим, вы хотите, чтобы валюта отображалась в предложении, которое тоже переведено. Вы можете обернуть компонент <Currency> в компонент <T>.

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      Цена: <Currency> {item.price} </Currency>.
    </T> 
  );
}

Пользовательское форматирование

Здесь мы выводим цену в GBP с фиксированным числом десятичных знаков и с узким символом валюты (то есть «$100», а не «US$100»). Подробнее о параметрах см. в Intl.NumberFormatOptions.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

Примечания

• Компонент <Currency> используется для форматирования денежных сумм с учётом текущей локали и переданных необязательных параметров.
• Компонент <Currency> отвечает только за форматирование и не выполняет никаких конвертаций или расчётов обменных курсов.
• Содержимое компонента <Currency> не отправляется в API для перевода. Все преобразования выполняются локально с помощью библиотеки Intl.NumberFormat.

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

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