Internationalization

Internationalization

Multiple languages feature is an important for your app. To have this enabled the app uses i18next (opens in a new tab).

How it works?

-At first, i18next library needs a config and initialization file, in this case, src/i18n file.

i18n/index.js

_35
import i18next from "i18next";
_35
import { initReactI18next } from "react-i18next";
_35
_35
const resources = {
_35
en: {
_35
translation: {
_35
"Bounce Rate": "Bounce Rate",
_35
"Session Duration": "Session Duration",
_35
"Live Online User": "Live Online User",
_35
"Page views": "Page views",
_35
"Visits by Top Referral Source": "Visits by Top Referral Source",
_35
"Session by browser": "Session by browser",
_35
"View Details": "View Details",
_35
},
_35
},
_35
es: {
_35
translation: {
_35
"Bounce Rate": "Porcentaje",
_35
"Session Duration": "Duración de la sesión",
_35
"Live Online User": "Usuario en línea en vivo",
_35
"Page views": "Visitas a la página",
_35
"Visits by Top Referral Source":
_35
"Visitas por principal fuente de referencia",
_35
"Session by browser": "Sesión por navegador",
_35
"View Details": "Ver detalles",
_35
},
_35
},
_35
};
_35
_35
i18next.use(initReactI18next).init({
_35
resources,
_35
lng: "en",
_35
fallbackLng: "en",
_35
interpolation: { escapeValue: false },
_35
});

  • Thereupon, Import initialization file in the App.jsx then i18next added globally in your projects. (In nextjs version import in the src/app/layout.jsx)
App.jsx

_10
import { useTranslation } from "react-i18next";
_10
import "./i18n";
_10
_10
const App = () => {
_10
const { t } = useTranslation();
_10
_10
return <h1>{t("Bounce Rate")}</h1>;
_10
};
_10
_10
export default App;

How to remove?

  • At first, Remove i18n import file from src/App.jsx component (In nextjs version remove from src/app/layout.jsx)
App.jsx

_10
import { useTranslation } from "react-i18next";
_10
import "./i18n"; // REMOVE THIS LINE
_10
_10
const App = () => {
_10
const { t } = useTranslation();
_10
_10
return <h1>{t("Bounce Rate")}</h1>;
_10
};
_10
_10
export default App;

copy

_10
npm uninstall i18next react-i18next

or

copy

_10
yarn remove i18next react-i18next

RTLDependencies