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

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

El componente `<Num>` renderiza una cadena con el número formateado 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 maneja de forma local mediante la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).


## Referencia

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

### 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. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                |
| `name`     | Nombre opcional para el 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 darles formato.                                                                                                                                                                                     |
| `options`  | Opciones de formato opcionales para el número, siguiendo la especificación [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Usa esto para definir estilos como moneda, precisión decimal, etc.                                          |
| `locales`  | `locales` opcionales para especificar la configuración regional de formato. Si no se proporcionan, se usa la configuración regional predeterminada del usuario. Lee más sobre cómo especificar `locales` [aquí](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, se volverá a dar formato a `item.quantity` según la configuración regional del usuario.

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

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


### Especificar locales

Por defecto, los locales se determinan a partir de la configuración del navegador del usuario,
pero puedes establecer explícitamente la configuración regional para el componente `<Num>`.

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

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.
Simplemente añade los componentes `<T>` alrededor del contenido.

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

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-react';

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 de variable, como `<Currency>`, `<DateTime>` y `<Var>`, consulta la documentación de [Uso de componentes Variable](/docs/react/guides/variables).