# gt-next: General Translation Next.js SDK: Num
URL: https://generaltranslation.com/es/docs/next/api/components/num.mdx
---
title: Num
description: Referencia de la API del componente Num
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}


## Resumen

El componente `<Num>` renderiza una cadena numérica formateada según la configuración regional del usuario y se puede personalizar con opciones de formato.

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

Todo el reformateo se realiza de forma local mediante la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Referencia

### Propiedades

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

### Descripción

| Prop       | Descripción                                                                                                                                                                                                                                                                                                                                           |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se renderiza dentro del componente. Normalmente es un número, al que se le dará formato según la configuración regional actual y las opciones indicadas. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                   |
| `name`     | Nombre opcional del campo numérico, usado con fines de metadatos.                                                                                                                                                                                                                                                                                     |
| `value`    | El valor predeterminado del número. Puede ser una cadena o un número. Las cadenas se convertirán en números antes de aplicarles formato.                                                                                                                                                                                                              |
| `options`  | Opciones de formato opcionales para el número, según la especificación de [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Úsalo para definir estilos como moneda, precisión decimal, etc.                                                                           |
| `locales`  | `locales` opcionales para especificar la configuración regional de formato. Si no se proporciona, se usa la configuración regional predeterminada del usuario. Para más información sobre cómo especificar `locales`, consulta [este enlace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene el número formateado como una cadena.

***

## Ejemplos

### Ejemplo básico

En este ejemplo, `item.quantity` se reformateará según la configuración regional del usuario.

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

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


### Especificar locales

Por defecto, los locales se determinan según la configuración del navegador del usuario,
pero puedes establecer explícitamente la configuración regional del componente `<Num>`.

```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]
  );
}
```


### Traducir componentes Num

Supongamos que quieres que tu número forme parte de una oración más larga que se traduzca.
Solo tienes que añadir los componentes `<T>` alrededor del contenido.

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


### Formato personalizado

`<Num>` usa la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) para dar formato.

```jsx
import { Num } from 'gt-next';

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

***


## Notas

* El componente `<Num>` se usa para dar formato a los números según la configuración regional del usuario.
* Dentro de un componente `<T>`, asegúrate de envolver todos los números dinámicos en un componente `<Num>`.

## Siguientes pasos

* Para obtener más información y ejemplos de uso del componente `<Num>` y de otros componentes Variable como `<Currency>`, `<DateTime>` y `<Var>`, consulta la documentación [Uso de componentes Variable](/docs/next/guides/variables).