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

title: Num
description: Format a number for the active locale with General Translation gt-react. API reference for Num.

---

The `<Num>` component renders a number formatted for the active locale. 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`. Examples import from `gt-react`; import from your framework's package instead.*

## 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 per instance with `locales`.
- **Inside a `<T>`.** When used within a `<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** `{}`

Formatting options following the [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification, such as `style`, `maximumFractionDigits`, and grouping.

### `locales` [#locales]

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

Locales to format for. 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]

```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>`, wrap all dynamic numbers in a `<Num>`.