How to add Localization (react-i18-next), and Right To Left support to a React project

2 min readMay 2, 2020

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 use flexbox you can use text-align: start ..
Avoid using padding-left ... , instead use padding-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 language
dir attribute in body
material-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!