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

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


## Обзор

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

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

Все операции форматирования выполняются локально с помощью библиотеки [`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?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

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

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

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

***

## Примеры

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

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

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

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


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

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

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

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


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

Допустим, вы хотите, чтобы число входило в более длинное переводимое предложение.
Просто оберните содержимое в компоненты `<T>`.

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### Настройка форматирования

`<Num>` использует библиотеку [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) для форматирования.

```jsx
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>`, см. в документации [Использование переменных компонентов](/docs/react/guides/variables).