CODEWITHSUNDEEP
i18nextreact-i18next
jrock2004
jrock2004

Reputation: 3501

Dynamic Value in Translation

What I am looking to do is have a some way to have a placeholder in my translations file that on runtime when called I can pass in what i18next should replace that placeholder with and I am unable to find documentation on this.

// translations

{
  “label”: “Message has {{count}} total messages”
  “person”: “Welcome {{full_name}} to your new site”
}

In the component I am using it I have the following

<button aria-label={t(‘label’, { count: total_count})}>
 <svg></svg>
</button>

But this is not working. Am I missing something? Thanks

Upvotes: 1

Views: 16446

Answers (1)

adrai
adrai

Reputation: 3168

What you are looking for is called interpolation.

Check out this: https://www.i18next.com/translation-function/interpolation

Upvotes: 3

Related Questions