This content originally appeared on DEV Community and was authored by Mohammad Faisal
To read more articles like this, visit my blog
Multi-language support is one of the important features of a good front-end application. Today we will see how we can add multiple language support in an existing React application.
For today we will assume that we need support for 2 languages. The process here can extend to any number of languages you want to support.
English(en)
Bangla(bn)
We will use a popular library named react-i18next based on i18next.
Step 1. Install Dependencies
We have to install 4 dependencies.
The first two libraries will do the heavy-lifting for us.
yarn add react-i18next i18next
The following package will detect the language automatically for us. So don’t have to worry about determining the currently selected language
yarn add i18next-browser-languagedetector
The next package will load the values depending on the language returned by the language detector.
yarn add i18next-xhr-backend
Step 2. Add Configuration File
Create a new file beside the index.js file named i18n.js Here we can specify the languages that we want to support.
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
const fallbackLng = ['en']
const availableLanguages = ['en', 'bn']
i18n.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng,
detection: {
checkWhitelist: true
},
debug: false,
whitelist: availableLanguages,
interpolation: {
escapeValue: false // no need for react. it escapes by default
}
})
export default i18n
Step 3:Modify App.js to Load Language
In this step, we have to modify our App.js file and include our configuration file. Notice we used <Suspense> here as react-i18next loads local resources asynchronously and we have to wait to finish loading
import React, { FC,Suspense } from 'react';
import './App.css';
import './i18n'
const App: FC = ()=> {
return (
<div className="App">
<Suspense fallback={null}>
//OTHER COMPONENTS
</Suspense>
</div>
);
}
export default App;
Step 4: Create Separate Files for Each Language
Create a new folder for each of the desired languages inside public/locales/language_name/
Be careful. The names must be exactly the same as the following picture. Otherwise, values can’t be loaded automatically. Obviously, we can change the behavior but for simplicity, we won’t go into that for now.
Step 5. Add Values Inside the Language-specific File
The contents under the file en/translation.js can be something like…
{
"top_bar_title": "Community Admin Panel"
}
the contents under the file bn/translation.js can be something like…
{
"top_bar_title": "Community Admin Panel"
}
This way you have to add the value for each of the individual languages.
Step 6. Using the Values Inside The Component
You can use the value defined inside the JSON files in the following way
Bonus: Switching language
Now you can simply use the following command anywhere to switch to your desired language (For example inside a button or language toggler)
Now your awesome application has support for as many languages as you want.
That’s it for today. Happy Coding! :D
Get in touch with me via LinkedIn
This content originally appeared on DEV Community and was authored by Mohammad Faisal
Mohammad Faisal | Sciencx (2023-05-10T18:00:00+00:00) Implement multi-language Support in React. Retrieved from https://www.scien.cx/2023/05/10/implement-multi-language-support-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.