# gt-react: General Translation React SDK: Currency
URL: https://generaltranslation.com/ru/docs/react/api/components/currency.mdx
---
title: Currency
description: Справка по API компонента Currency
---

{/* АВТОМАТИЧЕСКИ СГЕНЕРИРОВАНО: Не редактируйте напрямую. Отредактируйте шаблон в content/docs-templates/. */}


## Обзор

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

```jsx
<Currency>{100}</Currency>
// Вывод: $100.00
```

Все операции форматирования выполняются локально с помощью библиотеки [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).


## Справка

### Свойства

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Необязательное значение. Если не указано, в качестве value будет использовано children.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Свойство   | Описание                                                                                                                                                                                                                                                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | Содержимое, отображаемое внутри компонента. Обычно это число — значение, которое нужно отформатировать как валюту. Если передано, имеет приоритет над свойством `value`.                                                                                                                                                             |
| `name`     | Необязательное имя поля валюты, используемое в метаданных.                                                                                                                                                                                                                                                                           |
| `value`    | Значение валюты по умолчанию. Если не указано, используется значение из `children`. Может быть строкой или числом. Перед форматированием строки преобразуются в числа.                                                                                                                                                               |
| `currency` | Тип валюты, например &quot;USD&quot; или &quot;EUR&quot;. Определяет символ и форматирование, используемые для отображения валюты.                                                                                                                                                                                                   |
| `options`  | Необязательные параметры форматирования валюты в соответствии со [спецификацией `Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Используйте их, чтобы задать такие параметры, как максимальное количество знаков после запятой, группировка и т. д. |
| `locales`  | Необязательные локали для указания локали форматирования. Если не указаны, используется локаль пользователя по умолчанию. Подробнее о том, как задавать локали, читайте [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                                             |

### Возвращает

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

***

## Примеры

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

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

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


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

Здесь мы отображаем цену в евро.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


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

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

```jsx title="PriceDisplay.jsx" copy
import { T, Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```


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

Здесь мы отображаем цену в GBP, явно задавая точное количество знаков после запятой и используя узкий символ валюты (то есть &quot;$100&quot; вместо &quot;US$100&quot;).
Подробнее о других параметрах см. в [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

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

***


## Примечания

* Компонент `<Currency>` используется для форматирования денежных значений в соответствии с текущей локалью и переданными необязательными параметрами.
* Компонент `<Currency>` отвечает только за форматирование и не выполняет расчёт обменного курса.
* Содержимое компонента `<Currency>` не отправляется в API для перевода.
  Всё форматирование выполняется локально с помощью библиотеки [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

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

* Подробную информацию и примеры использования компонента `<Currency>` и других переменных компонентов, таких как `<Num>`, `<DateTime>` и `<Var>`, см. в документации [Использование переменных компонентов](/docs/react/guides/variables).