# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Num>`
URL: https://generaltranslation.com/en-GB/docs/react/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Format a number for the active locale. API reference for the `<Num>` component.

The `<Num>` component applies locale-aware digit grouping and decimal formatting to a number. It is a variable component for use inside a [`<T>`](/docs/react/reference/components/t), or on its own.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`.*

## Overview [#overview]

Pass a number as children and `<Num>` formats it for the active locale.

```tsx
<Num>{100}</Num>
// Output: 100
```

All formatting is handled locally with [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## How it works [#how-it-works]

* **Local formatting.** The number is reformatted in the browser using `Intl.NumberFormat`. Its value is never sent to the General Translation API.
* **Locale resolution.** By default, the active locale determines grouping and decimal separators. Override it for each instance with `locales`.
* **Inside a [`<T>`](/docs/react/reference/components/t).** When used within a [`<T>`](/docs/react/reference/components/t), wrap every dynamic number in a `<Num>` so it is treated as a variable rather than translatable text.

## Props [#props]

| Prop                    | Description                     | Type                       | Optional | Default       |
| ----------------------- | ------------------------------- | -------------------------- | -------- | ------------- |
| [`children`](#children) | The number to format.           | `number \| string`         | No       | —             |
| [`options`](#options)   | `Intl.NumberFormat` options.    | `Intl.NumberFormatOptions` | Yes      | `{}`          |
| [`locales`](#locales)   | Locale override for formatting. | `string[]`                 | Yes      | Active locale |
| [`name`](#name)         | Variable name for the entry.    | `string`                   | Yes      | —             |

### `children` [#children]

**Type** `number | string` · **Required**

The number to format. Strings are parsed into numbers before formatting.

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **Optional** · **Default** `{}`

The prop accepts [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Common options include:

| Option                     | Description                                                                            | Type                                                                                                                 | Optional | Default                                  |
| -------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| `localeMatcher`            | Locale matching algorithm.                                                             | `'lookup' \| 'best fit'`                                                                                             | Yes      | `'best fit'`                             |
| `numberingSystem`          | Numbering system, such as `latn` or `arab`.                                            | `string`                                                                                                             | Yes      | `'latn'`                                 |
| `style`                    | Plain number, currency, percentage, or unit formatting.                                | `'decimal' \| 'currency' \| 'percent' \| 'unit'`                                                                     | Yes      | `'decimal'`                              |
| `currency`                 | ISO 4217 currency code. Required when `style` is `'currency'`.                         | `string`                                                                                                             | Yes      | —                                        |
| `currencyDisplay`          | How to display a currency.                                                             | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | Yes      | `'symbol'`                               |
| `currencySign`             | Standard or accounting notation for negative currency values.                          | `'standard' \| 'accounting'`                                                                                         | Yes      | `'standard'`                             |
| `unit`                     | Unit identifier, such as `kilometer` or `megabyte`. Required when `style` is `'unit'`. | `string`                                                                                                             | Yes      | —                                        |
| `unitDisplay`              | Width of the unit label.                                                               | `'long' \| 'short' \| 'narrow'`                                                                                      | Yes      | `'short'`                                |
| `minimumIntegerDigits`     | Minimum integer digits; shorter values are padded with zeros.                          | `number` (`1`–`21`)                                                                                                  | Yes      | `1`                                      |
| `minimumFractionDigits`    | Minimum digits after the decimal separator.                                            | `number` (`0`–`100`)                                                                                                 | Yes      | Dependent on style                       |
| `maximumFractionDigits`    | Maximum digits after the decimal separator.                                            | `number` (`0`–`100`)                                                                                                 | Yes      | Dependent on style                       |
| `minimumSignificantDigits` | Minimum significant digits.                                                            | `number` (`1`–`21`)                                                                                                  | Yes      | `1`                                      |
| `maximumSignificantDigits` | Maximum significant digits.                                                            | `number` (`1`–`21`)                                                                                                  | Yes      | `21`                                     |
| `roundingPriority`         | Whether fraction or significant digits take priority.                                  | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Yes      | `'auto'`                                 |
| `roundingIncrement`        | Increment used at the selected rounding magnitude.                                     | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000`                    | Yes      | `1`                                      |
| `roundingMode`             | Direction used when rounding.                                                          | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Yes      | `'halfExpand'`                           |
| `trailingZeroDisplay`      | Whether to keep trailing zeros on whole numbers.                                       | `'auto' \| 'stripIfInteger'`                                                                                         | Yes      | `'auto'`                                 |
| `notation`                 | Standard, scientific, engineering, or compact notation.                                | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Yes      | `'standard'`                             |
| `compactDisplay`           | Long or short labels for compact notation.                                             | `'short' \| 'long'`                                                                                                  | Yes      | `'short'`                                |
| `useGrouping`              | When to display grouping separators.                                                   | `boolean \| 'always' \| 'auto' \| 'min2'`                                                                            | Yes      | `'auto'`; `'min2'` with compact notation |
| `signDisplay`              | When to display a positive or negative sign.                                           | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Yes      | `'auto'`                                 |

* Fraction-digit defaults depend on `style` and, for currency, the currency&#39;s standard minor units.
* `compactDisplay` only applies when `notation` is `'compact'`.
* `roundingIncrement` cannot be combined with significant-digit rounding or a `roundingPriority` other than `'auto'`.
* Supported units, numbering systems, rounding fields, and option values depend on the JavaScript runtime.

See the [`Intl.NumberFormat` options documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) for the latest available options and runtime behaviour.

### `locales` [#locales]

**Type** `string[]` · **Optional** · **Default** Active locale

Locales to use for formatting. When omitted, the active locale is used. See the [locales argument](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Type** `string` · **Optional**

An optional name for the number field, used for metadata.

## Examples [#examples]

*Examples import from `gt-react`; import from your framework&#39;s package instead.*

```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 [#notes]

* `<Num>` formats numbers for the active locale.
* Inside a [`<T>`](/docs/react/reference/components/t), wrap all dynamic numbers in a `<Num>`.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.