Getting the t function

For getting the t function (providing the translation functionality) down to your component you got two options:

  1. Using the render prop

  2. Using the hoc

Getting the i18n function into the flow

You got following options to pass the i18next instance to the hoc, render prop and trans component:

Use the provider

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')
);

Use the reactI18nextModule

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
i18n
.use(reactI18nextModule) // if not using I18nextProvider
.init({ /* options */ });
export default i18n;

Use the internal context

import { setI18n } from 'react-i18next';
import i18n from './i18n'; // initialized i18next instance
setI18n(i18n);

Details: https://github.com/i18next/react-i18next/blob/master/src/context.js