i18next - Providing a key in data-i18n-options attribute for interpolation

Question

Currently using i18next.js and have run in to a problem.

Say there's two keys:

{
    'keyOne':'I am __name__',
    'item': 'a person'
}

In the html:

<div data-i18n="keyOne" data-i18n-options={"name":"item"}></div>

And the result I'd like:

'I am a person'

Where 'a person' isn't the string literal but the reference to the key (ie like using data-i18n attribute)

Would it be possible to provide the 'item' key (not the string 'a person') for use in 'keyOne' for interpolation? This would be useful as when I change the locale I'd only have to call .i18n() on the div and both keys would be translated. Without this functionality I'd have to re-evaluate the context and update the div manually.

Any help would be much appreciated. Thanks

Answer 1

i18next has nesting functionality: https://www.i18next.com/translation-function/nesting

So I could make what you want. You can test in this jsfiddle: https://jsfiddle.net/leonardonsantos/3zy4xmnm/1/

Just change in data-i18n-options with this $t :

<div data-i18n="keyOne" data-i18n-options='{"name":"$t(item)"}'>