Member-only story

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

John Au-Yeung
2 min readJan 10, 2021

--

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.

--

--

No responses yet