Full tutorial with example code can be found on our blog.

Check blog post about i18next and React application localization in 3 steps.

Install dependencies

# Using NPM
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector

# Using yarn
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Configure i18next

Create i18n.ts file with i18next configuration. This file will be imported in index.ts.

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;

  .use (initReactI18next)
    // default/fallback language 
    fallbackLng: 'en',
    ns: ["default"],
    defaultNS: "default",
    //detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    interpolation: {
      escapeValue: false
    backend: {

export default i18n;

Enable i18next in application

Import i18n.ts file in index.ts by adding import './i18n'; Whole index.ts file should look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
    <Suspense fallback={<div>Loading...</div>}>
        <App />

Example usage

import React from "react";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>

export default App;

Use t function to get translation from given translation key


Switch languages with i18n.changeLanguage(language). i18n object comes from React Hook called useTranslations();

Full application code is available on Github. Visit simplelocalize/simplelocalize-i18next repository.