Package Exports

react-i18next

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-i18next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-i18next

Higher-order components and components for React when using i18next.

Installation

Source can be loaded via npm, bower or downloaded from this repo.

# npm package
$ npm install react-i18next

# bower
$ bower install react-i18next

If you don't use a module loader it will be added to window.reactI18next

Examples

Example project

Requirements

react >= 0.14.0
i18next >= 2.0.0

I18nextProvider

It will add your i18n instance in context.

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';

import App from './App'; // your entry page
import i18n from './i18n'; // initialized i18next instance

ReactDOM.render(
  <I18nextProvider i18n={ i18n }><App /></I18nextProvider>,
  document.getElementById('app')
);

Translate HOC

translate(namespaces): higher-order component to wrap a translatable component.

All given namespaces will be loaded.
props.t will default to first namespace in array of given namespaces (providing a string as namespace will convert automatically to array)
used nested inside I18nextProvider (context.i18n)

import React from 'react';
import { translate } from 'react-i18next';

function TranslatableView(props) {
  const { t } = props;

  return (
    <div>
      <h1>{t('keyFromDefault')}</h1>
      <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
    </div>
  )
}

export default translate(['defaultNamespace', 'anotherNamespace'])(TranslatableView);

Interpolate Component

Interpolate: component that allows to interpolate React Components or other props into translations.

used nested inside I18nextProvider and translation hoc (context.i18n, context.t)

props:

i18nKey: the key to lookup
options: options to use for translation (exclude interpolation variables!)
parent: optional component to wrap translation into (default 'span')
...props: values to interpolate into found translation (eg. my value with {{replaceMe}} interpolation)

  {
    "interpolateSample": "you can interpolate {{value}} or {{component}} via interpolate component!"
  }

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