If you are finding a way to build a website that uses multiple languages. This place is for you.
The hero of this solution is React-I18next. It's a react library that is used for translating languages. You can install the library by the command line below:
npm install i18next react-i18next@latest
To start off, we need to configure the library:
1. Create an initiation i8next file. I will name it i18n.js
:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
.use(initReactI18next)
.init({
debug: true,
fallbackLng: 'en',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
// language resources
resources: {
en: {
translation: {
welcome: "Welcome to React"
}
},
vn: {
translation: {
welcome: "Chào mừng đến với bình nguyên vô tận"
}
},
}
});
export default i18n;
Next, import the file into index.js
//pla pla
import './i18n'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Let's notice the resource
property where you can push more corresponding language. In a real-world project, this resource can come from a database (we will discuss in another article) but to keep the demonstration simply, I would like to translate English into Vietnamese and use an object directly. The default language is English.
2. Play with the library.
The idea is that the user will click on the button to translate languages on the website. Let's open App.js
To display and switch between two languages, the library provides useTranslation()
. It's a react-18next built-in that exposes some functions as below:
import { useTranslation } from 'react-i18next';
export default function App() {
const { t, i18n } = useTranslation();
return (
<div>
<h1>{t('welcome')}</h1>
</div>
);
}
export default App;
We use t
to get content by the key object in the resource object where we have configured it. The default language is English so it displays Welcome to React
.
import { useTranslation } from "react-i18next";
const lngs = [
{ code: "en", native: "English" },
{ code: "vn", native: "Vietnamese" },
];
export default function App() {
const { t, i18n } = useTranslation();
const handleTrans = (code) => {
i18n.changeLanguage(code);
};
return (
<div style={{padding: '50px'}}>
<h1>{t("welcome")}</h1>
{lngs.map((lng, i) => {
const { code, native } = lng;
return <button onClick={() => handleTrans(code)}>{native}</button>;
})}
</div>
);
}
Next, the i8next instance contains changeLanguage
function which is used for changing language by country code. It takes a parameter as a country code (en and vn).
3. Result
Finally, I hope it will be helpful to you. If you want me to use it with the database, just comment below. Really recommend you visit their document to learn the way to scale a huge project.
Top comments (24)
Bình nguyên vô tận mới chịu =))
Đọc phát nhìn lại tác giả mới biết VN =))
đồng hương trên đất khách quê ng 🤣🤣
đọc lướt qua thấy hết hồn =)))
dịch sát nghĩa lắm rồi :))
Great! Thanks.
Greetings from Venezuela
Great article, thanks !
Very nice article, i have a article with implementation with lazyLoading locales too react i18n in this link - dev.to/lucasferreiralimax/how-impl...
very helpfullll
ty
Thanks for sharing!!!
That is really useful!
This is very useful, so I can serve 2 audiences in my projects.
I usually do all the code in English but I live in Brazil.
it was really **helpful **thank you
keep supporting me in next articles <3
Nai sừ =))))