Translation in React Applications

When building web applications to a global audience, it's important to provide translated content to users in different languages.

One common approach to translation is to store translation strings in a separate repository, such as a GitHub repository, and retrieve them at runtime. This allows you to manage and maintain translations outside of your main application code and collaborate with a team of translators.

Using React and react-i18next with Separate Translation Repository

React is a popular JavaScript library for building user interfaces. react-i18next is a library that integrates with React, providing an easy and efficient way to add internationalisation (i18n) support to your application. This library provides a simple API for handling translations and makes it easy to translate your content into different languages.

With react-i18next, you can configure the library to retrieve translations from a separate repository, such as a GitHub repository. The translations can be stored in JSON files, one for each language, and fetched at runtime using the i18n.loadNamespaces method.

Here's an example of how you might use react-i18next with a separate translation repository:

import React from "react";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  lng: "en",
  fallbackLng: "en",
  ns: ["translations"],
  defaultNS: "translations",
  backend: {
    loadPath: "https://github.com/your-username/your-translation-repo/blob/master/{{lng}}/{{ns}}.json",
  },
});

const Greeting: React.FC = () => {
  const { t } = useTranslation();
  return <h1>{t("greeting")}</h1>;
};

export default Greeting;

By using a separate translation repository and react-i18next, you can easily manage and maintain your translations outside of your main application code and collaborate with a team of translators. This helps ensure that your application is accessible and inclusive to users from different countries and cultures.