11

Currency internationalization | eo-locale

 5 years ago
source link: https://eo-locale.netlify.app/blog/money/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Currency internationalization

April 22, 2020 · 2 min read

Maksim Sharipov

Maintainer of eo-locale

In this article we consider how to create clear and reusable component Money. For many websites it is actual issue to display prices in different currencies and for different languages. It helps to be more friendly with customers from any country.

Let's figure requirements for those component:

  • Ability to pass currency
  • Ability to pass language, because for different languages we use different numeric format
  • Mode of currency display

Actually, with @eo-locale/react it is quite simple issue.

I am a big fan of TypeScript and all examples will use it.

Interface MoneyProps extends interface Intl.NumberFormatOptions, therefore we can use any of standard params from Intl.NumberFormat.

For example, with next props:

Component will display $1,000.00

For change mode of currency display, set currencyDisplay property. It can be symbol, code or name. By default symbol.

Component will display 1,000.00 US dollars

If you want to show only one fraction digit, just pass maximumFractionDigits and minimumFractionDigits property.

Component will display $1,000.0


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK