Last modified: April 04, 2022Author: Jakub Pomykała

i18next: changing translations in realtime

In this article, you will learn how to configure i18next to server-side translations using i18next-http-backend library. Additionally, I will show you how to create translation keys automatically with default translation in SimpleLocalize translation editor.

Install dependencies

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

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

Configure i18next

Create i18n.ts file with i18next-http-backend configuration. i18next-http-backend is responsible for fetching translations from a remote server and for creating new keys used in your project.

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

const fallbackLanguage = 'en'

const projectToken = ""; // YOUR PROJECT TOKEN
const apiKey = ""; // YOUR API KEY

const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/{{lng}}`;
const addMissingTranslationsEndpoint = `https://api.simplelocalize.io/api/v1/translations`;

  .use (initReactI18next)
    fallbackLng: fallbackLanguage,
    backend: {
      loadPath: loadPath
    saveMissing: true,
    missingKeyHandler: (lngs, ns, key, fallbackValue) => {
      const configuration = {
        headers: {
          'X-SimpleLocalize-Token': apiKey

      const requestBody = {
        content: [
            key: key,
            language: fallbackLanguage,
            text: fallbackValue
      axios.post(addMissingTranslationsEndpoint, requestBody, configuration)

export default i18n;

Configure 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();

Translate and publish changes

Now, your users will see the updated translation every time you click 'Publish' button in the translation editor!

i18next translation management

More resources: