How To Pass a Variable to Your Translation String With i18next
Tags: javascript, programming, softwaredevelopment, softwareengineering
Published: 2024-01-19 21:15:37

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`](https://www.i18next.com/) 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](https://www.i18next.com/translation-function/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](https://www.i18next.com/translation-function/interpolation#basic) 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:

```json
{
    "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:

```javascript
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:

```javascript
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](https://en.wikipedia.org/wiki/Cross-site_scripting). You can disable this behavior by putting the `-` character after the curly brackets:

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

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

```javascript
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](https://gist.github.com/Tonel/30ba9d487d76ca3bbbfdafe39709b9e2).

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:

```javascript
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.
  
***
_The post "[How To Pass a Variable to Your Translation String With i18next](https://writech.run/blog/how-to-pass-a-variable-to-your-translation-string-with-i18next-b07614c33514/)" appeared first on [Writech](https://writech.run)._