DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on β€’ Edited on β€’ Originally published at dev.to

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;
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay