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

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


## Resumen

El componente `<Currency>` renderiza un valor numérico como una moneda.
El número recibe formato según la configuración regional actual y los parámetros opcionales que se pasen.
El componente de moneda solo maneja el formato y no realiza ningún cálculo de tipos de cambio.

```jsx
<Currency>{100}</Currency>
// Salida: $100.00
```

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?": {
      description: 'Valor opcional. Si no se proporciona, se usará children como value.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "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 que representa el valor al que se dará formato como moneda. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                    |
| `name`     | Nombre opcional del campo de moneda, usado con fines de metadatos.                                                                                                                                                                                                                                                      |
| `value`    | El valor predeterminado de la moneda. Si no se proporciona, se usará `children` como alternativa. Puede ser una cadena o un número. Las cadenas se convertirán en números antes de aplicar el formato.                                                                                                                  |
| `currency` | El tipo de moneda, como &quot;USD&quot; o &quot;EUR&quot;. Esto determina el símbolo y el formato usados para la moneda.                                                                                                                                                                                                |
| `options`  | Opciones de formato opcionales para la moneda, según la [especificación `Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Úsalo para definir estilos, como el número máximo de dígitos fraccionarios, la agrupación, 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. 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 valor monetario formateado como una cadena.

***

## Ejemplos

### Ejemplo básico

El componente `<Currency>` puede usarse para mostrar valores monetarios localizados.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-next'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


### Especificar la moneda

Aquí se muestra el precio en euros.

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

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


### Traducir componentes Currency

Supongamos que quieres que la moneda se muestre en una oración que también esté traducida.
Puedes envolver el componente `<Currency>` en un componente `<T>`.

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      El precio es <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```


### Formato personalizado

Aquí mostramos el precio en GBP, especificando un número exacto de decimales y usando el símbolo estrecho de la moneda (es decir, &quot;$100&quot; en lugar de &quot;US$100&quot;).
Lee más sobre [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) para conocer más opciones.

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

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol', // [!code highlight]
        minimumFractionDigits: 2, // [!code highlight]
        maximumFractionDigits: 2, // [!code highlight]
      }} // [!code highlight]
    >
      {item.price}
    </Currency>
  );
}
```

***


## Notas

* El componente `<Currency>` se usa para dar formato a los valores monetarios según la configuración regional actual y los parámetros opcionales que se pasen.
* El componente de moneda solo maneja el formato y no realiza ningún cálculo de tipos de cambio.
* El contenido del componente `<Currency>` no se enviará a la API para su traducción.
  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).

## Siguientes pasos

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