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

title: Currency
description: Formatea una cantidad monetaria para la configuración regional activa con General Translation gt-react. Referencia de la API de Currency.

---

El componente `<Currency>` renderiza un valor numérico con formato de moneda para la configuración regional activa. Solo da formato; no realiza conversiones por tipo de cambio.

*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 una cantidad como contenido hijo y establece el código de `currency`.

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

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.** La cantidad se formatea en el navegador con `Intl.NumberFormat`. Su valor nunca se envía a la API de General Translation.
* **Sin conversión.** `<Currency>` formatea el símbolo, la agrupación y los decimales según la moneda y la configuración regional elegidas, pero no convierte entre monedas.
* **Resolución de la configuración regional.** La configuración regional activa determina el formato, a menos que se sobrescriba con `locales`.

## Props [#props]

| Prop                    | Descripción                                                      | Type                       | Optional | Default                       |
| ----------------------- | ---------------------------------------------------------------- | -------------------------- | -------- | ----------------------------- |
| [`children`](#children) | La cantidad que se va a formatear.                               | `number \| string`         | No       | —                             |
| [`currency`](#currency) | Código de divisa ISO 4217.                                       | `string`                   | Sí       | `USD`                         |
| [`options`](#options)   | Opciones de `Intl.NumberFormat`.                                 | `Intl.NumberFormatOptions` | Sí       | `{}`                          |
| [`locales`](#locales)   | Configuración regional que sobrescribe la usada para el formato. | `string[]`                 | Sí       | configuración regional activa |
| [`name`](#name)         | Nombre de la variable de la entrada.                             | `string`                   | Sí       | —                             |

### `children` [#children]

**Tipo** `number | string` · **Obligatorio**

La cantidad a la que se le debe dar formato de moneda. Las cadenas se convierten en números antes de aplicar el formato.

### `currency` [#currency]

**Tipo** `string` · **Opcional** · **Predeterminado** `USD`

El código de divisa ISO 4217, como `USD` o `EUR`. Define el símbolo y el formato.

### `options` [#options]

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

Opciones de formato que siguen la especificación de [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), como `currencyDisplay` y los límites de los dígitos fraccionarios.

### `locales` [#locales]

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

Configuraciones regionales que se usarán para formatear. Si 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]

**Type** `string` · **Opcional**

Un nombre opcional para el campo Currency, que se usa como metadato.

## Ejemplos [#examples]

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

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

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

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

```tsx title="PriceDisplay.tsx"
import { T, Currency } from 'gt-react';

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

```tsx title="PriceDisplay.tsx"
import { Currency } from 'gt-react';

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

## Notas [#notes]

* `<Currency>` formatea los valores monetarios según la configuración regional activa; no convierte entre monedas.
* Su contenido se formatea localmente y nunca se envía a la API.