DEV Community

qian
qian

Posted on

react internationalization i18n

#react #i18next #internationalization

background

  • support multiple languages, need a language switcher in application.
  • language changes not associate with routes.

requirements

i18next react-i18next i18next-browser-languagedetector i18next-http-backend

code

i18.ts

i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    ns: [
      "translation",
      "header",
      "note",
      "settings",
      "zod",
      "custom",
      "introduce",
      "message",
    ],
    defaultNS: "translation",
    fallbackLng: "en",
    debug: false,
    detection: {
      caches: ["localStorage"],
    },
  });
export default i18n;
Enter fullscreen mode Exit fullscreen mode

main.ts

import "./i18";
Enter fullscreen mode Exit fullscreen mode

locale files

Put json file in the /public/locales/, if you add one json to each language, you need to add its filename to 'ns' in config, like above i18.ts.
[images]

using example

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

const { t } = useTranslation();

<button className="btn border truncate" onClick={handleSignIn}>
  {t("sign-in")}
</button>;
Enter fullscreen mode Exit fullscreen mode

translation.json

{
  "sign-in": "sign in"
}
Enter fullscreen mode Exit fullscreen mode

plurals 

t("item", { count: info.count });
Enter fullscreen mode Exit fullscreen mode 
{
  "item_one": "item",
  "item_other": "items"
}
Enter fullscreen mode Exit fullscreen mode
multiple namespaces useTranslation

if pass an array to useTranslation, the first namespace as the default, we can use it without pass namespace. The other namespaces, when getting data from these namespace, need to pass the namespace.

const { t } = useTranslation(["note", "message"]);

// default namespace
t("empty-description");
// other namesapces
t("save title successfully", { ns: "message" });
Enter fullscreen mode Exit fullscreen mode

note.json

{
  "empty-description": "No notes exists, go write your first note!"
}
Enter fullscreen mode Exit fullscreen mode

message.json

{
  "save title successfully": "save title successfully"
}
Enter fullscreen mode Exit fullscreen mode
Trans Component 
<Trans i18nKey={"success.description"} seconds={seconds}>
  we will get you in after {{ seconds }}s, or click here dive in right now
</Trans>
Enter fullscreen mode Exit fullscreen mode 
{
  "success": {
    "description": "we will get you in after {{seconds}}s, or click button go home right now"
  }
}
Enter fullscreen mode Exit fullscreen mode

get/set current language

get current language depends on the cache config in i18.ts
I use localStorage in this article

// get current language
const currentLng = localStorage.getItem("i18nextLng");

// set current language
const { i18n } = useTranslation();
i18n.changeLanguage(item);
Enter fullscreen mode Exit fullscreen mode

reference

Top comments (0)

Read next

zenstok profile image

Part 3/3: How to Implement Refresh Tokens through Http-Only Cookie in NestJS and React

zenstok -

mddanish004 profile image

Understanding Redux: A Beginner's Comprehensive Guide

Md Danish Ansari -

__khojiakbar__ profile image

memo() in React . . .

_Khojiakbar_ -

jollenmoyani profile image

How to Deploy React App on Azure Static Web Apps

Jollen Moyani -