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

title: Num
description: Formatea un número según la configuración regional activa con General Translation gt-react. Referencia de la API de Num.

---

El componente `<Num>` renderiza un número formateado según la configuración regional activa. Es un componente de variable que puede usarse dentro de un [`<T>`](/docs/react/reference/components/t) o por sí solo.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Descripción general [#overview]

Pasa un número como children y `<Num>` lo formateará según la configuración regional activa.

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

Todo el formateo se gestiona localmente con [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Cómo funciona [#how-it-works]

* **Formato local.** El número se reformatea en el navegador con `Intl.NumberFormat`. Su valor nunca se envía a la API de General Translation.
* **Resolución de la configuración regional.** De forma predeterminada, la configuración regional activa determina los separadores de miles y decimales. Puedes sobrescribirla en cada instancia con `locales`.
* **Dentro de un `<T>`.** Cuando se use dentro de un `<T>`, envuelve cada número dinámico en un `<Num>` para que se trate como una variable y no como texto traducible.

## Props [#props]

| Prop                    | Descripción                                          | Type                       | Opcional | Predeterminado                |
| ----------------------- | ---------------------------------------------------- | -------------------------- | -------- | ----------------------------- |
| [`children`](#children) | El número que se va a formatear.                     | `number \| string`         | No       | —                             |
| [`options`](#options)   | Opciones de `Intl.NumberFormat`.                     | `Intl.NumberFormatOptions` | Sí       | `{}`                          |
| [`locales`](#locales)   | Configuración regional para sobrescribir el formato. | `string[]`                 | Sí       | configuración regional activa |
| [`name`](#name)         | Nombre de la variable de la entrada.                 | `string`                   | Sí       | —                             |

### `children` [#children]

**Tipo** `number | string` · **Requerido**

El número que se va a formatear. Las cadenas se interpretan como números antes de formatearse.

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **Opcional** · **Predeterminado** `{}`

Opciones de formato conforme a la especificación [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), como `style`, `maximumFractionDigits` y la agrupación.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Locales que se usarán para dar formato. Cuando se omite, se usa la configuración regional activa. Consulta el [argumento `locales`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Tipo** `string` · **Opcional**

Un nombre opcional para el campo numérico, que se usa como metadato.

## Ejemplos [#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>
  );
}
```

## Notas [#notes]

* `<Num>` formatea los números según la configuración regional activa.
* Dentro de un `<T>`, envuelve todos los números dinámicos en un `<Num>`.