# gt-next: General Translation Next.js SDK: Num
URL: https://generaltranslation.com/en-US/docs/next/api/components/num.mdx
---
title: Num
description: API reference for the Num component
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<Num>` component renders a formatted number string in the user's locale, and can be customized with formatting options.
```jsx
<Num>{100}</Num>
// Output: 100
```
All reformatting is handled locally using the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) library.


## Reference

### Props

<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',
    },
  }}
/>

### Description
| Prop     | Description                                                                                                                                       |
|----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
| `children` | The content to render inside the component. Typically a number, which will be formatted according to the current locale and options. If provided, it takes precedence over the `value` prop. |
| `name`     | Optional name for the number field, used for metadata purposes.                                                                                   |
| `value`    | The default value for the number. Can be a string or number. Strings will be parsed into numbers before formatting.                               |
| `options`  | Optional formatting options for the number, following the [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) specification. Use this to define styles such as currency, decimal precision, etc. |
| `locales`   | Optional locales to specify the formatting locale. If not provided, the default user's locale is used. Read more about specifying locales [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                                            |

### Returns

`JSX.Element` containing the formatted number as a string.

---

## Examples

### Basic example
In this example, `item.quantity` will be reformatted according to the user's locale.

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

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

### Specifying locales
By default, locales are determined by the user's browser settings,
but you can explicitly set the locale for the `<Num>` component.

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

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

### Translating Num components
Let's say that you want your number to be in a larger sentence that gets translated.
Just add the `<T>` components around the content.

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

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

### Custom formatting
`<Num>` uses the [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) library for formatting.
```jsx
import { Num } from 'gt-next';

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

---

## Notes
 * The `<Num>` component is used to format numbers according to a user's locale.
 * When inside of a `<T>` component, make sure to wrap all dynamic numbers in a `<Num>` component.

## Next steps
 * For more details and usage examples of the `<Num>` component and other variable components like `<Currency>`, `<DateTime>`, and `<Var>`, see the [Using Variable Components](/docs/next/guides/variables) documentation.