How to correctly translate currencies display?

[crazyyi]

I have a requirement to translate something like this:

JPY ¥ {price}

But for some other currencies such as Chinese yuan it may be {price} 元.

I am thinking maybe I can do something like <Trans render=() => { return <>JPY ¥ {price} </>}></Trans> and then pass the price variable into the Trans tag. But I am not sure how to change the texts in translations. Maybe I need to use the value prop?

Is there a better way to do it in Lingui?

EDIT:

I just figured out I can just use <Trans>JPY ¥ {price}</Trans>. The Trans tag can convert the variable correctly.

[timofei-iatsenko]

You also can use

<Trans>
  The price is: {i18n.number(price, { style: "currency", currency: "EUR" })}
</Tans>

This will use number formatting rules from current locale + styling option for this currency.

Examples from test suite:

it("should pass format options", () => {
      expect(
        number(["en"], 1000, { style: "currency", currency: "EUR" })
      ).toMatchInlineSnapshot(`"€1,000.00"`)

      expect(
        number(["en"], 1000, { maximumSignificantDigits: 3 })
      ).toMatchInlineSnapshot(`"1,000"`)
    })

    it("should respect passed locale", () => {
      expect(
        number(["pl"], 1000, { style: "currency", currency: "EUR" })
      ).toMatchInlineSnapshot(`"1000,00 €"`)
    })

[crazyyi]

Thanks but how to get i18n variable from the component? Should I use useLingui or import from @lingui/core?
Also if I need to format for days can I use something like:
{i18n.number(day, { style: "day" })} ?

[timofei-iatsenko]

It's better to get i18n object from useLingui hook, because it will also "subscribe" your component for the locale changes.

{i18n.number(day, { style: "day" })}

You can check all format options here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters