react-i18next NPM Package — Trans Component with Lists and I18nextProvider

Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

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 use the Trans and I18nextProvider components to render our translations.

Trans Component and Lists

We can use the Trans component with lists.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Trans } from "react-i18next";
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
list_map: "My dogs are named: <1></1>"
}
}
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
export default function App() {
return (
<div className="App">
<Trans i18nkey="list_map">
My dogs are named:
<ul i18nIsDynamicList>
{["mary", "max"].map((dog) => (
<li>{dog}</li>
))}
</ul>
</Trans>
</div>
);
}

We have the list_map translation which we load with the Trans component.

i18nkey has the key for the translations.

The i18nIsDynamicList prop lets us render lists in our translations.

Components Array

We can interpolate translations with an array of components.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Trans } from "react-i18next";
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
hello: "hello great <0>{{what}}</0>"
}
}
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
export default function App() {
return (
<div className="App">
<Trans
i18nKey="hello"
defaults="hello <0>{{what}}</0>"
components={[<strong>{{ what: "universe" }}</strong>]}
/>
</div>
);
}

We have an array of components that we passed into the components prop.

The <0> tag indicates the index of the component will be interpolated.

We map the values to the interpolation placeholder with an object.

defaults has the default translation string.

i18nKey has the translation key.

I18nextProvider

We can initialize the i18n instance with the I18nextProvider .

For example, we can write:

index.html

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import i18n from "i18next";
import { initReactI18next, I18nextProvider } from "react-i18next";
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
hello: "hello world"
}
}
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</React.StrictMode>,
rootElement
);

App.js

import React from "react";
import { useTranslation } from "react-i18next";
export default function App() {
const { t } = useTranslation();
return <div className="App">{t("hello")}</div>;
}

The I18nextProvider wraps around the App so that we initial the i18n object for the whole app.

Then in our App component, we can get the translations.

Conclusion

We can use the Trans component to render lists. Also, we have the I18nProvider to wrap around app to enable translations in our whole app.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store