Skip to main content

Feature: i18n

i18n stands for internationalization and is a crucial feature for making your dapp accessible to a global audience. It allows you to provide translations and adapt your application to different languages and regions. With i18n support pre-configured in this template, you can easily localize your dapp's user interface and content.

The internationalization feature is powered by i18next, a popular internationalization library. It simplifies the process of adding and managing translations, making it easier for you to create a multilingual dapp.

Configuration​

The configuration file for the i18n feature can be found at src/features/i18n/config.ts. In this file, you can define and manage various settings related to internationalization, including adding supported languages to your application.

By adding languages to this configuration, you enable your application to support multiple languages, allowing users to switch between them seamlessly.

Usage​

Using i18n translations in your React components is straightforward. You can utilize the useTranslation and Trans components provided by react-i18next. Here's an example of how to use translations in a component:

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

export const ExampleUsage: React.FC = () => {
  const { t } = useTranslation("ExampleUsage");

  // Using translation function (t)
  const translatedText = t(
    "This text will be translated. You will find this text in the ExampleUsage.json file under the translations directory."
  );

  return (
    <div>
      <p>{translatedText}</p>

      {/* Using the Trans component with HTML elements */}
      <Trans t={t}>
        You can use <strong>html</strong> elements inside this component.
      </Trans>
    </div>
  );
};