Using interpolation to handle dynamic values in translation strings

Interpolation allows dynamic values to be used within translations.

• It is used where a value is uncertain, dynamic or susceptible to change.

• It is also used with pluralisation.

How to use interpolation

In the JSON file, we use {{ }} brackets to indicate where we will be using interpolation. This value will change depending on our provided value in the translation hook.

Our code where the translation key is rendered:

The code will now appear as:

Use interpolation sparingly

Interpolation should be used as little as possible. It cannot be avoided in cases of:

• Time stamps

• User-inputted data

Interpolation can cause issues when concatenating values. Depending on the interpolated value, the rest of the sentence may need to be changed

zero, single or plural values are natively understood by i18n to parse zero, single or plural values and present different sentences depending on the value.

Reference

• i18next: Best Practices and Implications of Interpolation