react-i18next NPM Package— Loading Translations

If we want to add localization to a React app, we can use the react-i18next NPM package to do it.

In this article, we’ll look at how to load translations.

Loading Namespaces

We can load namespaces with the useTranslation hook.

For instance, we can write:

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

const resources = {
  en: {
    ns1: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t } = useTranslation("ns1");

  return (
    <div className="App">
      <p>{t("Welcome to React")}</p>
    </div>
  );
}

We load the 'ns1' namespace by passing it in as the argument of the useTranslation hook.

Also, we can pass in multiple namespaces.

For example, we can write:

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

const resources = {
  en: {
    ns1: {
      "Welcome to React": "Welcome to React and react-i18next"
    },
    ns2: {
      Hello: "Hello World"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t } = useTranslation(["ns1", "ns2"]);

  return (
    <div className="App">
      <p>{t("Welcome to React")}</p>
      <p>{t("ns2:Hello")}</p>
    </div>
  );
}

to load both the ns1 and ns2 namespaces.

Any namespace other than the first needs to be prefixed with the namespace name.

Overriding the i18next Instance

We can override the i18next instance with the i18n option.

For example, we can write:

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

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t } = useTranslation(undefined, { i18n });

  return (
    <div className="App">
      <p>{t("Welcome to React")}</p>
    </div>
  );
}

We just pass it into the i18n property.

Not using Suspense

We can also disable using the Suspense component for loading translations dynamically.

For example, we can write:

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

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t, i18n, ready } = useTranslation(undefined, { useSuspense: false });

  return (
    <div className="App">
      <p>{ready && t("Welcome to React")}</p>
    </div>
  );
}

to disable using the Suspense component.

If we do that, then we have to check the ready state ourselves as we did with the translation above.

Conclusion

We can pass various arguments into the useTranslation hook to adjust how translations are loaded with the react-i18next NPM package.