Search code examples
javascriptreactjsinternationalizationi18n-js

ReactJS & i18n.js: Translations with links

I have a ReactJS project that's using i18n.js for translations.

In i18n JSON file I have a line like this:

"register": {
    "terms": "I have read and accept the Terms of Service"
}

I want only the "Terms of Service" part of the sentence to be a link.

At first I tried something like this:

<label className="lead">
    {i18n.t('register.terms').substr(0, 27)}<a href="#">{i18n.t('register.terms').substr(27, 43)}</a>
</label>

But well, of course it does not work with any other language than english.

Is there a way to do this without splitting the string value in two fields in the JSON file?

Solution

  • Answer:

    You can create an array.

    "terms": ["I have read and accept the ", "Terms of Service"]

    And then get the values like that:

    <p>{i18n.t('terms.0')}<a href="#">{i18n.t('terms.1')}</a></p>