# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/fr/docs/react/reference/components/currency.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formater un montant dans une devise selon le paramètre régional actif. Référence d’API pour le composant ``. Le composant `` affiche une valeur numérique au format monétaire pour le paramètre régional actif. Il se limite au formatage — il n’effectue aucune conversion selon le taux de change. *Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`.* ## Vue d’ensemble [#overview] Passez un montant comme élément enfant, puis définissez le code `currency`. ```tsx {100} // Résultat : $100.00 ``` Tout le formatage est géré localement avec [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). ## Fonctionnement [#how-it-works] * **Formatage local.** Le montant est mis en forme dans le navigateur à l’aide de `Intl.NumberFormat`. Sa valeur n’est jamais envoyée à l’API de General Translation. * **Aucune conversion.** `` met en forme le symbole, les séparateurs de milliers et les décimales pour la devise et le paramètre régional choisis, mais ne convertit pas d’une devise à l’autre. * **Résolution du paramètre régional.** Le paramètre régional actif détermine le formatage, sauf s’il est remplacé par `locales`. ## Props [#props] | Prop | Description | Type | Facultatif | Par défaut | | ----------------------- | --------------------------------------------------------- | -------------------------- | ---------- | ------------------------ | | [`children`](#children) | La valeur à mettre en forme. | `number \| string` | Non | — | | [`currency`](#currency) | Code de devise ISO 4217. | `string` | Oui | `USD` | | [`options`](#options) | Options de `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Oui | `{}` | | [`locales`](#locales) | Remplace le paramètre régional utilisé pour le formatage. | `string[]` | Oui | Paramètre régional actif | | [`name`](#name) | Nom de variable de l’entrée. | `string` | Oui | — | ### `children` [#children] **Type** `number | string` · **Obligatoire** Le montant à formater au format monétaire. Les chaînes de caractères sont converties en nombres avant le formatage. ### `currency` [#currency] **Type** `string` · **Facultatif** · **Par défaut** `USD` Le code de devise ISO 4217, par exemple `USD` ou `EUR`. Il détermine le symbole et la mise en forme. ### `options` [#options] **Type** `Intl.NumberFormatOptions` · **Facultatif** · **Par défaut** `{}` La prop accepte [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Les options courantes sont les suivantes : | Option | Description | Type | Facultatif | Par défaut | | -------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------- | | `localeMatcher` | Algorithme de correspondance des paramètres régionaux. | `'lookup' \| 'best fit'` | Oui | `'best fit'` | | `numberingSystem` | Système de numérotation, tel que `latn` ou `arab`. | `string` | Oui | `'latn'` | | `style` | Style de formatage des nombres. | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Oui | `'currency'` | | `currency` | Code de devise ISO 4217. Remplace la prop `currency` de niveau supérieur lorsqu'elle est spécifiée ici. | `string` | Oui | prop `currency` | | `currencyDisplay` | Mode d'affichage de la devise. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Oui | `'symbol'` | | `currencySign` | Notation standard ou comptable pour les valeurs négatives. | `'standard' \| 'accounting'` | Oui | `'standard'` | | `unit` | Identifiant de l'unité utilisé si `style` est défini sur `'unit'`. | `string` | Oui | — | | `unitDisplay` | Largeur du libellé de l'unité. | `'long' \| 'short' \| 'narrow'` | Oui | `'short'` | | `minimumIntegerDigits` | Nombre minimal de chiffres entiers ; les valeurs plus courtes sont complétées par des zéros. | `number` (`1`–`21`) | Oui | `1` | | `minimumFractionDigits` | Nombre minimal de chiffres après le séparateur décimal. | `number` (`0`–`100`) | Oui | Dépend de la devise | | `maximumFractionDigits` | Nombre maximal de chiffres après le séparateur décimal. | `number` (`0`–`100`) | Oui | Dépend de la devise | | `minimumSignificantDigits` | Nombre minimal de chiffres significatifs. | `number` (`1`–`21`) | Oui | `1` | | `maximumSignificantDigits` | Nombre maximal de chiffres significatifs. | `number` (`1`–`21`) | Oui | `21` | | `roundingPriority` | Indique si les chiffres fractionnaires ou significatifs sont prioritaires. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Oui | `'auto'` | | `roundingIncrement` | Incrément utilisé à la précision d'arrondi sélectionnée. | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | Oui | `1` | | `roundingMode` | Direction utilisée lors de l'arrondi. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Oui | `'halfExpand'` | | `trailingZeroDisplay` | Indique s'il faut conserver les zéros de fin pour les nombres entiers. | `'auto' \| 'stripIfInteger'` | Oui | `'auto'` | | `notation` | Notation standard, scientifique, d'ingénierie ou compacte. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Oui | `'standard'` | | `compactDisplay` | Libellés longs ou courts pour la notation compacte. | `'short' \| 'long'` | Oui | `'short'` | | `useGrouping` | Moment où les séparateurs de groupement sont affichés. | `boolean \| 'always' \| 'auto' \| 'min2'` | Oui | `'auto'` ; `'min2'` avec la notation compacte | | `signDisplay` | Moment où un signe positif ou négatif est affiché. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Oui | `'auto'` | Le composant applique `style: 'currency'`, la prop `currency` de niveau supérieur et `numberingSystem: 'latn'` avant d'appliquer `options`. Les valeurs fournies via `options` remplacent donc ces valeurs par défaut. * Les valeurs par défaut du nombre de chiffres après la virgule dépendent des unités monétaires secondaires standard de la devise. * `compactDisplay` s’applique uniquement lorsque `notation` vaut `'compact'`. * `roundingIncrement` ne peut pas être combiné à un arrondi par chiffres significatifs ni à une valeur de `roundingPriority` autre que `'auto'`. * Les unités, systèmes de numérotation, champs d’arrondi et valeurs d’options pris en charge dépendent de l’environnement d’exécution JavaScript. Consultez la [documentation des options de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) pour connaître les dernières options disponibles et le comportement de l’environnement d’exécution. ### `locales` [#locales] **Type** `string[]` · **Facultatif** · **Par défaut** Paramètre régional actif Paramètres régionaux à utiliser pour la mise en forme. Si ce paramètre est omis, le paramètre régional actif est utilisé. Consultez l’[argument locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). ### `name` [#name] **Type** `string` · **Facultatif** Nom facultatif du champ de type devise, utilisé comme métadonnée. ## Exemples [#examples] *Les exemples importent depuis `gt-react` ; importez plutôt depuis le paquet de votre 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} ); } ``` ## Notes [#notes] * `` met en forme les valeurs monétaires selon le paramètre régional actif ; il ne convertit pas les devises. * Son contenu est mis en forme localement et n’est jamais envoyé à l’API. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.