interpolate.md

Interpolate

{% hint style="danger" %} 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!! {% endhint %}

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.