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
import i18next from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
en: {
translation: {
"Bounce Rate": "Bounce Rate",
"Session Duration": "Session Duration",
"Live Online User": "Live Online User",
"Page views": "Page views",
"Visits by Top Referral Source": "Visits by Top Referral Source",
"Session by browser": "Session by browser",
"View Details": "View Details",
},
},
es: {
translation: {
"Bounce Rate": "Porcentaje",
"Session Duration": "Duración de la sesión",
"Live Online User": "Usuario en línea en vivo",
"Page views": "Visitas a la página",
"Visits by Top Referral Source":
"Visitas por principal fuente de referencia",
"Session by browser": "Sesión por navegador",
"View Details": "Ver detalles",
},
},
};

i18next.use(initReactI18next).init({
resources,
lng: "en",
fallbackLng: "en",
interpolation: { escapeValue: false },
});
  • 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
import { useTranslation } from "react-i18next";
import "./i18n";

const App = () => {
const { t } = useTranslation();

return <h1>{t("Bounce Rate")}</h1>;
};

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
import { useTranslation } from "react-i18next";
import "./i18n"; // REMOVE THIS LINE

const App = () => {
const { t } = useTranslation();

return <h1>{t("Bounce Rate")}</h1>;
};

export default App;
copy
npm uninstall i18next react-i18next

or

copy
yarn remove i18next react-i18next
Last updated on
RTLDependencies