Interpolate (v9)

i18next localization as a service Find your translator
Search…
Interpolate (v9)
Deprecated: We highly recommend having a look at the new trans component as it provides a better experience. 
This component will be remove in the next major version v9.0.0!!
The interpolate component enables you to interpolate react components into translation strings (eg. to use links).
the key:
{
  "interpolateSample": "you can interpolate {{value}} or {{component}} via interpolate component!"
}
sample:
import React from 'react';
import { translate, Interpolate } from 'react-i18next';
​
function TranslatableView(props) {
  const { t } = props;
​
  let interpolateComponent = <strong>a interpolated component</strong>;
​
  return (
    <div>
      <Interpolate i18nKey="ns:interpolateSample" value="some string" component={interpolateComponent} />
      {/*
        =>
        <span>
          you can interpolate "some string" or <strong>a interpolated component</strong> via interpolate component!
        </span>
      */}
    </div>
  )
}
You can use formatting as in i18next.
props:
i18nKey: the key to lookup
options: options to use for translation (exclude interpolation variables!)
parent: optional component to wrap translation into (default 'span')
useDangerouslySetInnerHTML: allows use of raw html tags in translation values
dangerouslySetInnerHTMLPartElement: optional component to wrap parts of translation values into (default 'span'), used with useDangerouslySetInnerHTML={true} only
i18n: i18next instance to use if not provided via context (using hoc or render props)
t: t function to use if not provided via context (using hoc or render props)
...props: values to interpolate into found translation (eg. my value with {{replaceMe}} interpolation)
using useDangerouslySetInnerHtml
Allows having html tags inside the translation with a restriction as those get wrapped in spans. You can't have a interpolation value inside a html tag.
the key:
{
"interpolateSample": "you <strong>can</strong> interpolate {{value}} or {{component}} via interpolate component!"
}
sample:
import React from 'react';
import { translate, Interpolate } from 'react-i18next';
​
function TranslatableView(props) {
  const { t } = props;
​
  let interpolateComponent = <strong>a interpolated component</strong>;
​
  return (
    <div>
      <Interpolate i18nKey="ns:interpolateSample" useDangerouslySetInnerHTML={true} value="some string" component={interpolateComponent} />
      {/*
        =>
        <span>
          you <strong>can</strong> interpolate "some string" or <strong>a interpolated component</strong> via interpolate component!
        </span>
      */}
    </div>
  )
}
Alternatives
a) Use standard interpolation of i18next and dangerously insert that:
<div dangerouslySetInnerHTML={{ __html: t('my-label', { link: yourURL }) }} />
b) use markdown, eg. react-remarkable and pass markdown formatted content from translations to the markdown component.
Last modified 3yr ago
Copy link
Outline
using useDangerouslySetInnerHtml
Alternatives