react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  • using useDangerouslySetInnerHtml
  • Alternatives
  1. legacy v9

Interpolate (v9)

Last updated 6 years ago

Deprecated: We highly recommend having a look at the new 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>
  )
}

props:

  • i18nKey: the key to lookup

  • 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 }) }} />

You can use as in i18next.

options: to use for translation (exclude interpolation variables!)

b) use markdown, eg. and pass markdown formatted content from translations to the markdown component.

trans component
formatting
options
react-remarkable