Skip to main content
Version: 5.x.x

React integration using i18next

Overview

You can integrate Tolgee with React applications using i18next and react-i18next. It is recommend to use the ICU message formatter, since the Tolgee platform natively supported it.

Installation

To get started, install the necessary packages:

npm install react-i18next i18next-icu

Setup

After installation, set up your i18next instance with Tolgee and React integration:

import { withTolgee, Tolgee, I18nextPlugin, DevTools } from '@tolgee/i18next';
import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

const tolgee = Tolgee().use(DevTools()).use(I18nextPlugin()).init({
apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
apiKey: process.env.VITE_APP_TOLGEE_API_KEY,
});

withTolgee(i18n, tolgee)
.use(ICU)
.use(initReactI18next)
.init({
lng: 'en', // or use i18next language detector
supportedLngs: ['cs', 'en', 'fr', 'de'],
});

You can now use the features of react-i18next.

Feel free to explore the example application for more advanced usage and integration patterns.

tip

You can also check the i18next example application to learn more.