Valeur de devise
Utilisation
Il s'agit d'un composant utilitaire pour l'affichage et le formatage des données. Il n'existe donc pas de directives d'expérience utilisateur spécifiques.
Code
<CurrencyValue value={123456} />
Instruction d'importation
import { CurrencyValue } from '@jutro/components';
Cahier des charges du composant
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Propriétés
idobligatoire- Type
stringDescriptionUnique identifier for the component.
amount- Type
number | stringDescriptionThe numeric value to display. Equivalent to the
amountproperty in an object entered in thevalueproperty. className- Type
stringDescriptionCSS class name for this component.
currency- Type
stringDescriptionThe currency name to display for localization. Equivalent to the
currencyproperty in an object entered in thevalueproperty. currencyDisplay- Type
'code' | 'symbol' | 'name'DescriptionThe format of the currency name to display for localization.
Valeur par défautsymbol path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
placeholder- TypeDescription
The string to display in the UI if
amountis undefined/null.Valeur par défaut'-' prefix- TypeDescription
Optional prefix message to be attached in front of the value.
showFractions- Type
booleanDescriptionIf
true, displays fractions with the amount. Iffalse, it will round the value to the nearest whole number.Valeur par défauttrue showGrouping- Type
booleanDescriptionIf
true, displays grouping separators with the value.Valeur par défauttrue suffix- TypeDescription
Optional suffix message to be attached at the end of the value.
tag- Type
stringDescriptionThe HTML tag to use when rendering the outermost element of this component.
Valeur par défaut'div' value- Type
number | string | { amount: number | string, currency: string }DescriptionValue to display. If the type is
number', it will be used as the currencyamount. If the type is 'string', it will be cast to 'number', then used as currencyamount. If the type is an object, it will set thecurrencyandamount`.
API impérative
jutro-components propose la fonction formatCurrency à utiliser avec l'API de formatage impérative.
import { formatCurrency } from '@jutro/components';
Cette opération importe une fonction formatCurrency(intl, props, currencyObject) avec les arguments et le type de retour suivants :
Return value
- Type
stringDescriptionFormatted currency string.
currencyObject- Type
number | string | { amount: number | string, currency: string }DescriptionCurrency value override to be used instead of the one provided with props.
intl- Type
react.intl.IntlDescriptionAn instance of the imperative formatting API access object.
props- Type
CurrencyValue.propTypesDescriptionValid properties for a
CurrencyValueobject.
Crochets
Aucun crochet n'est disponible pour currency value.
Clés de traduction
Il n'existe aucune traduction pour currency value.
Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.
Portes de sortie
Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.
Exemples
Consultez la section Utilisation pour découvrir comment concevoir correctement une valeur de devise et connaître les différentes options de configuration que nous proposons.
Exemple de valeur de devise de base
Le composant CurrencyValue peut prendre une valeur numérique et l'afficher sous la forme d'un montant monétaire. Cela ajoutera un symbole de devise, des séparateurs et un séparateur décimal en fonction des paramètres régionaux.
<CurrencyValue value={123456} />
Exemple d'entrée d'objet
La propriété value peut prendre un objet indiquant le montant et la devise de la valeur à afficher. La propriété de devise doit être un code de devise alphabétique ISO 4217.
<CurrencyValue value={ {amount: 123456, currency: "EUR"} } />
<CurrencyValue value={ {amount: 123456, currency: "USD"} } />
Propriétés de montant et de devise
Vous pouvez utiliser les propriétés amount et currency dans le composant CurrencyValue comme alternative à la définition d'un objet dans la propriété value.
<CurrencyValue amount={ 123456 } currency="EUR" />
<CurrencyValue amount={ 123456 } currency="USD" />
Format de devise
Vous pouvez utiliser la propriété currencyDisplay pour définir si le symbole, le code de devise alphabétique ISO 4217 ou le nom de la devise doit être affiché.
<CurrencyValue value={123456} currencyDisplay="code" />
<CurrencyValue value={123456} currencyDisplay="symbol" />
<CurrencyValue value={123456} currencyDisplay="name" />
Afficher des fractions
Vous pouvez choisir d'afficher ou non la partie fractionnaire de la valeur à l'aide de la propriété showFractions. La valeur sera arrondie au nombre entier le plus proche.
<CurrencyValue
value={1234.5} // note that this becomes 1235 in the sample above due to rounding
showFractions={false}
/>
Exemple d'API impérative
jutro-components propose la fonction formatCurrency à utiliser avec l'API de formatage impérative.
import { formatCurrency } from '@jutro/components';
import { useIntl } from '@jutro/locale';
...
const intl = useIntl();
...
const c1 = formatCurrency(intl, { value: 1232.24, currency: 'eur', showFractions: true });
const c2 = formatCurrency(intl, { value: 4232.24, currency: 'jpy', showFractions: true, currencyDisplay: 'code'});
const c3 = formatCurrency(intl, { showFractions: true }, { amount: 23434.34, currency: 'dkk' });
// en-US output:
€1,232.24
JPY 4,232
DKK 23,434.34
// pl-PL output
1232,24 €
4232 JPY
23 434,34 DKK