Discussion on: How to properly internationalize a React application using i18next

[Paolo Di Pietro]

Thanks Adriano, good post!

But I have a couple of questions:

1) How do you solve the following sentence `I received a gift from Abruzzo' '...from Marche' and '... from Lombardia' giving the fact that in the Italian language (and in many other) the result should be 'dall'Abruzzo', 'dalle Marche' and 'dalla Lombardia'?

2) What is the best way to introduce markup in the text to be translated, if possible?
Something like "I'd like to drink a Red wine" without the need to split this short sentence in three parts?

Thank you

[Adriano Raiano]

Ciao Paolo!

1) I would use the context feature of i18next combined with the interpolation functionality:

// en.json
{
    "key": "I received a gift from {{context}}"
}

// it.json
{
    "key": "Ho ricevuto un regalo da {{context}}",
    "key_Abruzzo": "Ho ricevuto un regalo dall'Abruzzo",
    "key_Marche": "Ho ricevuto un regalo dalle Marche",
    "key_Lombardia": "Ho ricevuto un regalo dalla Lombardia"
}

// when language is italian:
i18next.t('key',  { context: 'Abruzzo' }); // Ho ricevuto un regalo dall'Abruzzo
i18next.t('key',  { context: 'Marche' }); // Ho ricevuto un regalo dalle Marche
i18next.t('key',  { context: 'Lombardia' }); // Ho ricevuto un regalo dalla Lombardia
i18next.t('key',  { context: 'Trieste' }); // Ho ricevuto un regalo da Trieste

// when language is english:
i18next.t('key',  { context: 'Abruzzo' }); // I received a gift from Abruzzo
i18next.t('key',  { context: 'Marche' }); // I received a gift from Marche
i18next.t('key',  { context: 'Lombardia' }); // I received a gift from Lombardia
i18next.t('key',  { context: 'Trieste' }); // I received a gift from Trieste

2) best is to use the Trans component for this:

<Trans i18nKey="key">
  I'd like to drink a <strong>Red</strong> wine
</Trans>

{
    "key": "I'd like to drink a <1>Red</1> wine"
}