Search code examples
reactjsgettexti18next

Using number variables with i18next.t() for generating gettext .po files

I'm in the process of generating .po files for translators. I'm currently doing this in my React app by using i18next to generate a translation.json file and then using i18next-conv to convert that to a .po file.

I'm using the gettext approach where my key is basically the English string that I want to convert. This is working great but there are some use cases where I'm concerned for flexibility.

For example, I have a date of birth error field where if the person is younger than 12 years old we will show the user: "Must be 12 years or older!".

So currently I just use: i18next.t('Must be 12 years or older!')

I want to know if I could make that 12 a variable so that there's a template for this translation. Eg. what if the age value there was a variable provided by the backend, how to do make that a variable using that current standard that I'm taking?

Solution

  • I was able to sort it out by writing the following:

    i18next.t('Must Be {{minAge}} Years Or Older', { minAge: MIN_AGE })

    Where MIN_AGE is the variable.

    This seems to work great, then in the .po file that line looks like this:

    msgid "Must Be {{minAge}} Years Or Older"
msgstr "Must Be {{minAge}} Years Or Older"

    And the .json file converts to this:

    {
  "Must Be {{minAge}} Years Or Older": "Must Be {{minAge}} Years Or Older"
}

    And the resulting text when MIN_AGE=16 renders "Must Be 16 Years Or Older" as expected.