# General Translation React SDKs (gt-react, gt-next): Num
URL: https://generaltranslation.com/ru/docs/react/reference/components/num.mdx
---

title: Num
description: Форматирует число для активной локали с помощью General Translation gt-react. Справочник API для Num.

---

Компонент `<Num>` отображает число в формате активной локали. Это компонент переменной, который можно использовать внутри [`<T>`](/docs/react/reference/components/t) или отдельно.

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах используется импорт из `gt-react`; вместо него импортируйте из пакета вашего фреймворка.*

## Обзор [#overview]

Передайте число в качестве children, и `<Num>` отформатирует его в соответствии с активной локалью.

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

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

## Как это работает [#how-it-works]

* **Локальное форматирование.** Число форматируется в браузере с помощью `Intl.NumberFormat`. Его значение никогда не отправляется в API General Translation.
* **Определение локали.** По умолчанию активная локаль задаёт разделители групп разрядов и десятичный разделитель. При необходимости это можно переопределить для конкретного экземпляра с помощью `locales`.
* **Внутри `<T>`.** При использовании внутри `<T>` оборачивайте каждое динамическое число в `<Num>`, чтобы оно обрабатывалось как переменная, а не как переводимый текст.

## Пропсы [#props]

| Prop                    | Описание                              | Type                       | Необязательно | По умолчанию    |
| ----------------------- | ------------------------------------- | -------------------------- | ------------- | --------------- |
| [`children`](#children) | Число для форматирования.             | `number \| string`         | Нет           | —               |
| [`options`](#options)   | Параметры `Intl.NumberFormat`.        | `Intl.NumberFormatOptions` | Да            | `{}`            |
| [`locales`](#locales)   | Переопределяет локаль форматирования. | `string[]`                 | Да            | Активная локаль |
| [`name`](#name)         | Имя переменной для записи.            | `string`                   | Да            | —               |

### `children` [#children]

**Тип** `number | string` · **Обязательно**

Число, которое нужно отформатировать. Строки перед форматированием преобразуются в числа.

### `options` [#options]

**Тип** `Intl.NumberFormatOptions` · **Необязательно** · **По умолчанию** `{}`

Параметры форматирования в соответствии со спецификацией [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), например `style`, `maximumFractionDigits` и параметры группировки.

### `locales` [#locales]

**Тип** `string[]` · **Необязательный** · **По умолчанию** Активная локаль

Локали, для которых выполняется форматирование. Если параметр не указан, используется активная локаль. См. [аргумент locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Тип** `string` · **Необязательно**

Необязательное имя числового поля, используемое в метаданных.

## Примеры [#examples]

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

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

```tsx title="CountDisplay.tsx"
import { Num } from 'gt-react';

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

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

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

```tsx title="CustomFormat.tsx"
import { Num } from 'gt-react';

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

## Заметки [#notes]

* `<Num>` форматирует числа в соответствии с активной локалью.
* Внутри `<T>` оборачивайте все динамические числа в `<Num>`.