# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/es/docs/react/reference/components/currency.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formatea una cantidad monetaria para la configuración regional activa. Referencia de la API del componente ``. El componente `` 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`.* ## Descripción general [#overview] Pasa una cantidad como contenido hijo y establece el código de `currency`. ```tsx {100} // 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.** `` 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** `{}` La prop acepta [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Entre las opciones más habituales se incluyen: | Opción | Descripción | Tipo | Opcional | Predeterminado | | -------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- | | `localeMatcher` | Algoritmo de coincidencia de configuración regional. | `'lookup' \| 'best fit'` | Sí | `'best fit'` | | `numberingSystem` | Sistema de numeración, como `latn` o `arab`. | `string` | Sí | `'latn'` | | `style` | Estilo de formato numérico. | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Sí | `'currency'` | | `currency` | Código de divisa ISO 4217. Reemplaza la prop `currency` de nivel superior cuando se especifica aquí. | `string` | Sí | prop `currency` | | `currencyDisplay` | Cómo mostrar la divisa. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Sí | `'symbol'` | | `currencySign` | Notación estándar o contable para valores negativos. | `'standard' \| 'accounting'` | Sí | `'standard'` | | `unit` | Identificador de unidad que se usa si `style` se cambia a `'unit'`. | `string` | Sí | — | | `unitDisplay` | Longitud de la etiqueta de unidad. | `'long' \| 'short' \| 'narrow'` | Sí | `'short'` | | `minimumIntegerDigits` | Número mínimo de dígitos enteros; los valores más cortos se rellenan con ceros. | `number` (`1`–`21`) | Sí | `1` | | `minimumFractionDigits` | Número mínimo de dígitos después del separador decimal. | `number` (`0`–`100`) | Sí | Depende de la divisa | | `maximumFractionDigits` | Número máximo de dígitos después del separador decimal. | `number` (`0`–`100`) | Sí | Depende de la divisa | | `minimumSignificantDigits` | Número mínimo de dígitos significativos. | `number` (`1`–`21`) | Sí | `1` | | `maximumSignificantDigits` | Número máximo de dígitos significativos. | `number` (`1`–`21`) | Sí | `21` | | `roundingPriority` | Si tienen prioridad los dígitos fraccionarios o los significativos. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Sí | `'auto'` | | `roundingIncrement` | Incremento usado en la magnitud de redondeo seleccionada. | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | Sí | `1` | | `roundingMode` | Dirección que se usa al redondear. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sí | `'halfExpand'` | | `trailingZeroDisplay` | Si se deben conservar los ceros finales en números enteros. | `'auto' \| 'stripIfInteger'` | Sí | `'auto'` | | `notation` | Notación estándar, científica, de ingeniería o compacta. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Sí | `'standard'` | | `compactDisplay` | Etiquetas largas o cortas para la notación compacta. | `'short' \| 'long'` | Sí | `'short'` | | `useGrouping` | Cuándo mostrar separadores de agrupación. | `boolean \| 'always' \| 'auto' \| 'min2'` | Sí | `'auto'`; `'min2'` con notación compacta | | `signDisplay` | Cuándo mostrar un signo positivo o negativo. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Sí | `'auto'` | El componente aplica `style: 'currency'`, la prop `currency` de nivel superior y `numberingSystem: 'latn'` antes de aplicar `options`. Por lo tanto, los valores proporcionados mediante `options` reemplazan esos valores predeterminados. * Los valores predeterminados de los dígitos fraccionarios de Currency se basan en las unidades menores estándar de la moneda. * `compactDisplay` solo se aplica cuando `notation` es `'compact'`. * `roundingIncrement` no se puede combinar con el redondeo de dígitos significativos ni con una `roundingPriority` distinta de `'auto'`. * Las unidades compatibles, los sistemas de numeración, los campos de redondeo y los valores de las opciones dependen del runtime de JavaScript. Consulta la [documentación sobre las opciones de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) para conocer las opciones disponibles más recientes y el comportamiento del runtime. ### `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] *Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.* ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return {item.price}; // [!code highlight] } ``` ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return {item.price}; // [!code highlight] } ``` ```tsx title="PriceDisplay.tsx" import { T, Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return ( The price is {item.price}. // [!code highlight] ); } ``` ```tsx title="PriceDisplay.tsx" import { Currency } from 'gt-react'; export default function PriceDisplay({ item }) { return ( {item.price} ); } ``` ## Notas [#notes] * `` 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. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.