How To Pass a Variable to Your Translation String With i18next

When dealing with internationalization, you may need to integrate dynamic values into your translations. This is because your strings might require external data to provide complete info to the end-user, such as the user’s name.

As you can imagine, this is when of the most common scenario when it comes to dealing with translation messages, and i18next provides you with everything required to tackle this task effortlessly.

So, let’s delve into how to pass one or more variables to your translation with the i18next library.

Interpolation in i18next

Interpolation is one of the most used functionalities in I18N. It allows integrating dynamic values into your translations. — Interpolation

When defining a translation string that should contain one or more parameters, these must be identified in some way. Specifically, i18next allows you to define a parameter in your translation string by using a key.

As explained here in the official documentation, a key is nothing more than a string surrounded by curly brackets. This is how a parameter is identified in a i18next translation string in a .json file:

{
    "welcome_message": "Welcome, {{name}}!"
}

In the example above, name is a key identifying a parameter that should be replaced with the user’s name. This can be achieved as follows:

i18next.t('welcome_message', { name: 'Antonello' })

When run, this would return:

Welcome, Antonello!

Similarly, you can define more parameters in your translation string by using more keys, as shown below:

i18next.t("{{name}} has {{followerNumber}} followers", { name: 'Antonello', followers: 5100 })

This returns the following string:

Antonello has 5100 followers

By default, the parameter values get escaped to avoid XSS attacks. You can disable this behavior by putting the - character after the curly brackets:

{
    "unescaped_message": "Welcome, {{- name}}!",
    "escaped_message": "Welcome, {{name}}!"
}

Or by setting the escapeValue option to false when requesting a translation:

i18next.t("Welcome, {{name}}!", { name: '<Antonello />', interpolation: { escapeValue: false } })
// => Welcome, <Antonello />

// without `escapeVaue: false` this would be escaped 
i18next.t("Welcome, {{name}}!", { name: '<Antonello />' })
// =>> "Welcome, &lt;Antonello &#x2F;&gt;"

This is just one of the many translation options supported by i18next. You can find them all here.

Please, notice that disabling the XSS attack prevention is dangerous and should be avoided.

Dealing With Data Objects

The i18next interpolation feature allows you to pass an entire data model to your translation string as well. This will be used as a value for interpolation, as shown in the example below:

const user = { 
    name: 'Antonello',
    surname: 'Zanini'
}

i18next.t("Welcome, {{user.name}}!", { user })

Again, this would return:

Welcome, Antonello!

Conclusion

Here, we looked at how to pass one or more parameters to your i18next translation strings. This can be easily achieved by taking advantage of the i18next interpolation feature, which allows you to integrate dynamic values into your translations. As learned in this article, you can pass both strings and objects. Also, you can use the several options available to produce the perfect internationalized message.

Thanks for reading! I hope that you found this article helpful.