Nesting

Nesting allows you to reference other keys in a translation. Could be useful to build glossary terms.

Basic

keys

{
    "nesting1": "1 $t(nesting2)",
    "nesting2": "2 $t(nesting3)",
    "nesting3": "3",
}

sample

JavaScript

i18next.t('nesting1'); // -> "1 2 3"

TypeScript

You can reference keys from other namespaces by prepending the namespace: "nesting1": "1 $t(common:nesting2)",

Passing options to nestings

You can pass entire data models in options.

keys

{
    "girlsAndBoys": "They have $t(girls, {\"count\": {{girls}} }) and $t(boys, {\"count\": {{boys}} })",
    "boys": "{{count}} boy",
    "boys_other": "{{count}} boys",
    "girls": "{{count}} girl",
    "girls_other": "{{count}} girls",
}

sample

JavaScript

i18next.t('girlsAndBoys', {girls: 3, boys: 2});
// -> "They have 3 girls and 2 boys"

TypeScript

Make sure the options string is valid JSON and can be parsed using JSON.parse

'sampleKey': 'test $t(nest2, { "changedVarName": "{{var}}" })'

Passing nesting to interpolated

keys

{
      "key1": "hello world",
      "key2": "say: {{val}}"
}

sample

JavaScript

i18next.t('key2', {val: '$t(key1)'});
// -> "say: hello world"

TypeScript

If you're using >= v21.0.0 you need to set skipOnVariables to false:

interpolation: {
  skipOnVariables: false
}

Additional options

Prefix/Suffix for nesting and other options can be overridden in init interpolation options or by passing additional options to t function:

sample

JavaScript

i18next.init({
    interpolation: { ... }
});

i18next.t('key', {
    interpolation: { ... }
});

TypeScript

option	default	description
nestingPrefixEscaped	undefined	escaped prefix for nesting (regexSafe)
nestingSuffixEscaped	undefined	escaped suffix for nesting (regexSafe)

While there are a lot of options going with the defaults should get you covered.