Member-only story
react-i18next NPM Package — Trans Component with Lists and I18nextProvider
2 min readJan 10, 2021
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.