Plugins

Plugins allow you to quickly install sophisticated functionality to your applications. 🔥

Localization - i18next

In today's technological world, the ability of your website to draw in new visitors is more crucial than ever. You may reach a much larger audience and increase your reach by having a multilingual website.

We have provided multiple language options using i18next plugin.

Basic sample

Let's add the French language to our project :

1. Navigate to src/plugins/i18n folder.

📂 src
└── 📂 plugins 
    └── 📂 i18n 
        ├── 📂 locales
        |   ├── ar.json
        |   └── en.json
        └── index.js

1. Create a new file named fr.json in the src/plugins/locales folder with following content

   {
     "hello": "Bonjour"
   }

2. Add the new language in the src/plugins/index.js file.

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en.json";
import ar from "./locales/ar.json";
import fr from "./locales/fr.json";

const storedLang = app.locale ? app.locale : localStorage.getItem("locale");

i18next.use(initReactI18next).init({
  resources: {
    en: {
      translation: en,
    },
    fr: {
      translation: fr,
    },
    ar: {
      translation: ar,
    },
  },
  lng: storedLang,
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});
export default i18next;

TIP

• i18next language is auto-stored in the localStorage for further usage.
• If you need more info about i18next plugin please read its official documentation here.