How to import correct currency when it's dynamic?

[v3rron]

Version: 2.0.0-alpha.8

Hi, this library seems to have a great potential. However, there's one thing that's currently unclear.

How do we use dynamic currency imports when the currency value is coming from API?

Let's say there's a React app that gets this object from API:

{
  totalCents: 1050,
  currency: 'USD'
}

That needs to convert to:

$10.50

or

{
  totalCents: 999999,
  currency: 'JPY'
}

That needs to convert to:

¥9999.00

How would one do that in React? The logical thing would be to use toFormat method, but this method requires a constant that was imported prior.

import { toFormat } from 'dinero.js'
import { ? } from '@dinero.js/currencies'

const transformer = ({ amount, currency }) => `${currency.missing_symbol_value}${amount}`;

const price = dinero({ amount: totalCents, currency: ? });

toFormat(price, transformer);

Also, how do we get the currency symbol for the transformer so it will return $10.50 and not USD 10.50?

[pnappa]

Refer to the Transporting and Restoring page in the API for tips on how to serialise/deserialise Dinero objects.

In short, calling toSnapshot(obj) on a Dinero object will output a JSON lossless-serialisable object, of the form:

{
  amount: 1050,
  currency: {
    code: 'USD',
    base: 10,
    exponent: 2,
  },
  scale: 2,
}

When then can be supplied into the dinero constructor:

dinero({ amount: 1050, currency: { code: 'USD', base: 10, exponent: 2 }, scale: 2 }) // -> A dinero object representing $USD 10.50

So, you can either adjust your API to return these Dinero snapshot objects, or if you know you're dealing with cent currencies (100 subunits in a unit -> 100 cents in a dollar/yen), you can just return the cents + currency code, and hardcode the base = 10, exponent=2, scale=2 when constructing the dinero object.

[araromirichard]

please, I am in this fix now, my currency is dynamic but i am confused on how to import it when. hopefully someone helps drop a clearer explanation

[johnhooks]

You could...

import * as currencies from '@dinero.js/currencies'

const key = 'USD' // or whatever

if (key in currencies) {
  const currency = currencies[key]
  // do what ever you want to with the currency
}

Though I would suggest storing the currency data in a more permanent way and probably version it, and not rely on the library for appropriate currency values.

[sarahdayan]

Hey @araromirichard,

As @pnappa and @johnhooks mentioned, how you import the currencies depend on your use case.

If you're creating the Dinero objects in your app from nothing (e.g., a user creates and entry that contains a monetary value) then you can statically import the currencies that they can use. For example, if you app accepts USD and EUR:

import { USD, EUR } from '@dinero.js/currencies';

const currencies = [
  {
    name: 'USD',
    currency: USD,
  },
  {
    name: 'EUR',
    currency: EUR,
  },
];

// Then you can for instance build a `<select>` from `currencies` and generate objects on the fly.

If you allow many currencies and you're worried about bundle size, you should look into dynamic imports.

If you're restoring objects that you previously serialized and stored into a database, then you can refer to the documentation.