# 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. Edita la plantilla en content/docs-templates/. */}


## Descripción general

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

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

Todo el reformateo se realiza localmente con 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án children como valor.',
      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 que se va a formatear como Currency. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                                                              |
| `name`     | Nombre opcional del campo de Currency, usado con fines de metadatos.                                                                                                                                                                                                                                                                                               |
| `value`    | El valor predeterminado de la Currency. 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 darles formato.                                                                                                                                                               |
| `currency` | El tipo de Currency, como &quot;USD&quot; o &quot;EUR&quot;. Esto determina el símbolo y el formato que se usarán para la Currency.                                                                                                                                                                                                                                  |
| `options`  | Opciones de formato opcionales para la Currency, 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 decimales, la agrupación, etc.                                                                     |
| `locales`  | Lista opcional de configuraciones regionales 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 configuraciones regionales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Devuelve

`JSX.Element` que contiene la Currency formateada como una cadena.

***

## Ejemplos

### Ejemplo básico

El componente `<Currency>` se puede usar para mostrar valores monetarios en el formato local.

```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 Currency

Aquí mostramos 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 de Currency

Supongamos que quieres que la Currency se muestre en una frase 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 ver 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 formatear valores de Currency según la configuración regional actual y los parámetros opcionales que se pasen.
* El componente de Currency solo se encarga del 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 formateo se realiza localmente con la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Próximos pasos

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