How to add Localization (react-i18-next), and Right To Left support to a React project
In this article I’ll walk you through the process of adding localization support to React app. Also, we will add Right to Left(RTL) support to the Application(including material-ui support).
We will use react-i18next library.
Lets start by adding it to our project:
npm i i18next react-i18next i18next-browser-languagedetector --save
Then we will configure i18n with our app.
Possible folder structure:
src
i18n
|_i18n.js
|_en
|__en.json // English
|_he
|__he.json // Hebrew
…
In the JSON files we will add the translations:
After that we will set i18n.js
:
We used i18next-browser-languagedetector
so the selected language will be saved after refresh(it will basically save the language in the local storage and restore it in refresh).
index.js
:
How to use react-i18-next in React
content will be translated using the provided t
function.
Inside class component it can be used with withTranslation HOC
Used
withTranslation
HOC.
Inside functional component it can be used with useTranslation
Used
useTranslation
function.
I used
App.js
after converting it to functional component, but this method can be used with any functional component.
How to add RTL (right-to-left) support
To add RTL support to the application, we will set on index.html
<body>
an attribute called dir
dynamically.
We will set the attribute on the entry component ( by default App.js
).
i18n.dir()
will provide the current language direction, and then body dir
attribute will be assigned with the direction ( ltr
or rtl
).
general tips for RTL:
- Use flex
align-items:flex-start ..
, if you don’t want to useflexbox
you can usetext-align: start ..
- Avoid using
padding-left ...
, instead usepadding-inline-start ..
Bonus: Adding RTL support to material-ui
In case we need RTL support to material-ui
components, there is extra steps that should be done.
I will be following this tutorial in the article: https://material-ui.com/guides/right-to-left/
Lets start by installing jss-rtl
package:
npm i jss-rtl --save
And then creating withRoot.js
HOC that will be used in entry component App.js
.
Theme direction will be retrieved and updated according to i18n.dir()
that we used earlier to get the current language direction.
withRoot.js
App.js
How to change the language after all this changes
To change the language, need to update:
i18n
languagedir
attribute in bodymaterial-ui theme direction
For showing that what we did works, I will create snackBar.js
component which is basically material-ui
component, I will be using it for its simplicity.
I will add it under components
folder.
Snackbar.js
And then I will use it in App.js
This should be it!
Github source code link: https://github.com/saifabusaleh/react-i18n-rtl-demo
Additional useful resources:
https://react.i18next.com/getting-started
https://material-ui.com/guides/right-to-left/
Hope this article will help you :), please let me know if you have any feedback.
Follow me on Medium for more!