# 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/. */}


## Descripción general

El componente `<Currency>` muestra un valor numérico con formato de moneda.
El número se formatea 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 ningún cálculo de tipos de cambio.

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

Todo el reformateo se realiza localmente 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, es un número que representa el valor que se formateará 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 valor de respaldo. 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. Obtén más información 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 importe formateado como una cadena.

***

## Ejemplos

### Ejemplo básico

El componente `<Currency>` se puede usar para mostrar importes en formato local.

```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 la moneda

Aquí se muestra 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 la moneda se muestre en una frase 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]
      The price is <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```


### Formato personalizado

Aquí mostramos el precio en GBP, especificando exactamente el número de decimales y usando el símbolo abreviado 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-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 de moneda 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 ningún cálculo de tipo de cambio.
* El contenido del componente `<Currency>` no se enviará a la API para traducirse.
  Todo el reformateo se realiza localmente mediante la biblioteca [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Próximos pasos

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