# gt-react: General Translation React SDK: Currency
URL: https://generaltranslation.com/es/docs/react/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/. */}


## Resumen

El componente `<Currency>` renderiza un valor numérico como Currency.
Al número se le da formato según la configuración regional actual y los parámetros opcionales que se proporcionen.
El componente de Currency solo se encarga del formato y no realiza cálculos 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 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, un número que representa el valor al que se le dará formato como Currency. Si se proporciona, tiene prioridad sobre la prop `value`.                                                                                                                       |
| `name`     | Nombre opcional para el campo de Currency, usado con fines de metadatos.                                                                                                                                                                                                                                                     |
| `value`    | El valor predeterminado para 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 aplicar el formato.                                                                                                                   |
| `currency` | El tipo de Currency, como &quot;USD&quot; o &quot;EUR&quot;. Esto determina el símbolo y el formato que se usan para Currency.                                                                                                                                                                                              |
| `options`  | Opciones de formato opcionales para 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 dígitos decimales, la agrupación, etc.                        |
| `locales`  | `locales` opcionales para especificar la configuración regional del formato. Si no se proporcionan, se usa la configuración regional predeterminada del usuario. leer 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 Currency formateado como una cadena.

***

## Ejemplos

### Ejemplo básico

El componente `<Currency>` puede usarse para mostrar valores monetarios con formato localizado.

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

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


### Especificar Currency

Aquí mostramos el precio en euros.

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

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


### Traducir componentes Currency

Supongamos que quieres que Currency se muestre dentro de una oración que también se traduzca.
Puedes envolver el componente `<Currency>` en un componente `<T>`.

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

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, con un número exacto de decimales y usando el símbolo monetario estrecho (es decir, &quot;$100&quot; en lugar de &quot;US$100&quot;).
Leer 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-react';

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 valores monetarios según la configuración regional actual y los parámetros opcionales que se pasen.
* El componente de moneda solo se encarga del formato y no realiza cálculos de tipo 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 Variable, como `<Num>`, `<DateTime>` y `<Var>`, consulta la documentación [Uso de componentes Variable](/docs/react/guides/variables).