An automatic currency converter and formatter for React
npm install react-forex-price
!size 3.5kB gzipped
!circleci passing


An automatic currency conversion component for React, perfect as a drop-in replacement for displaying monetary values in your users' home currency.
✨ Try it for yourself with this demo ✨
Note: This component is intended for displaying estimated prices — you should not transact based on the values received from this component.
- Accurate. Daily foreign exchange rates from the European Central Bank, for free.
- Easy. Dead-simple usage. No API key required.
- Efficient. Multiple instances incur only one network request per user per day, cached automatically.
- Formatted. Locale-aware, so prices are displayed the way users expect.
- Worldwide. 32 currencies supported.
- Compatible. Works in all major browsers, React 0.14 and up, 8.9kB minified, 3.5kB minified + gzipped.
Add it to your project:
yarn add react-forex-price
(Note: You'll need a promise polyfill if you're not using one already for this to work in browsers that don't support promises natively. I recommend promise-polyfill.)
Import it anywhere:
``JSX`
import Price from 'react-forex-price';
If your base currency is USD, all you need to do is plug your values into the amount prop as a number.
` I bought a dress for JSX`
Only the amount prop is required.
Prop | Description
--------- | -----------
amount | (Number. Required. No default value) baseCurrency
The amount you are converting. | (String. Optional. Default value: USD) displayCurrency
The currency you are converting from. This should be the same value for all instances so that prices are normalized. | (String. Optional. Default value: Determined by user's locale, fallback to USD) navigator.language
The currency you are converting to. The user's browser language (i.e. ) is consulted to determine a default value. dropCents
Note: If you already know the user's preferred currency (based on data you collect), it is recommended to supply it. | (Boolean. Optional. Default value: false) rounding
Whether to omit digits after the decimal point, if they exist. See Rounding. | (Function. Optional. Default value: Math.round) unwrap
Rounding function. See Rounding. | (Boolean. Optional. Default value: false)
Whether to unwrap the outputted element. See Output.
Exchange rate data comes from Fixer, an open-source, simple, and lightweight API for current and historical foreign exchange (forex) rates published by the European Central Bank.
The Fixer API will only be consulted once per user per unique base currency per day, no matter how many Price instances you have per page.
The data is cached via localStorage if available, falling back to memory.
If the API cannot be reached, the amount is displayed in the base currency (formatted based on user locale, but not converted).
The following currencies are currently supported:
- AUD: Australian dollarBGN
- : Bulgarian levBRL
- : Brazilian real CAD
- : Canadian dollarCHF
- : Swiss francCNY
- : Chinese yuan renminbiCZK
- : Czech koruna DKK
- : Danish krone EUR
- : Euro GBP
- : Pound sterling HKD
- : Hong Kong dollar HRK
- : Croatian kunaHUF
- : Hungarian forint IDR
- : Indonesian rupiahILS
- : Israeli shekel INR
- : Indian rupee ISK
- : Icelandic kronaJPY
- : Japanese yen KRW
- : South Korean won MXN
- : Mexican peso MYR
- : Malaysian ringgitNOK
- : Norwegian kroneNZD
- : New Zealand dollar PHP
- : Philippine pisoPLN
- : Polish zloty RON
- : Romanian leu RUB
- : Russian rouble SEK
- : Swedish kronaSGD
- : Singapore dollar THB
- : Thai bahtTRY
- : Turkish lira USD
- : US dollar
There may be plans to support other currencies in the future. There are no plans to support cryptocurrencies.
If displayCurrency is not specified, the display currency is estimated by the user's locale. For , a user in the USA would see a value of approximately "$8,675.31", and a user in Germany would see a value of approximately "€6.944,67".
If displayCurrency is specified, then the conversion is forced. For , a user in the USA would see a value of approximately "€6,944.67", and a user in Germany would see a value of approximately "€6.944,67" (notice thousands separator and decimal point).
For e.g. the en-US locale,
- results in $8,675.30
- results in $8,675
- results in $8,675.31
- results in $8,676
By default, prices are wrapped in a element. For example,
`JSX`
translates to
`JSX`
€99.08
If you would like to simply return an unwrapped string, pass the unwrap prop. That makes
`JSX`
translate to
``
€99.08
- Run yarn lint to lint with eslintyarn flow
- Run for static type analysis with flowyarn test
- Run to run unit tests with jestyarn test:full` for all of the above
- Run
All tests are run on each pull request via CircleCI.
Want to improve something? Feel free to file an issue or open a pull request 😁