Is your React app RTL language ready?
Tags: rtl, react, web, arabic
Published: 2020-02-07 22:21:36

---
title: Is your React app RTL language ready?
published: true
description: This step-by-step guide will help you to implement RTL in  react application.
tags: RTL, react, web, arabic
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ym6sb3rz18m92kybq3r9.jpg
---

[1. What is RTL?](#chapter-1)
[2. Why your application should have support for RTL?](#chapter-2)
[3. How to make your React apps RTL ready?](#chapter-3)
[4. Demo source code with all the steps done.](#chapter-4)
[5. What's next?](#chapter-5)

<a name="chapter-1"></a>
###What is RTL?
In a right-to-left(commonly abbreviated RTL) script, flow of the writing starts from the right side of the page and continues to the left. 

For example, [Arabic script](https://en.wikipedia.org/wiki/Arabic_script) is the most widespread RTL writing system in modern times.

![Screenshot image of a paragraph written in Arabic](https://dev-to-uploads.s3.amazonaws.com/i/j76vl6xy47ds24iuj716.png)

<a name="chapter-2"></a>
###Why your app should have support for RTL?
In simple words, if you want your application to reach out to wider audience, supporting RTL is one of the features that your application must have, especially if your application is being served in the region where format of writing is RTL.

Below are the screenshots of [tajawal](https://www.tajawal.ae/en) - UAE's online travel platform for flights and hotels, in both RTL(Arabic) and LTR(English) language, you can see the differences, it is just like a mirror, where everything gets flipped.

![screenshot image of tajawal.com in Arabic and English](https://dev-to-uploads.s3.amazonaws.com/i/8skaekht2187er67mo3k.png)

*Image source: https://www.tajawal.ae/*

<a name="chapter-3"></a>
###How to make your React apps RTL ready?
The below steps are for your apps that you have created with [Create React App](https://create-react-app.dev/). Also keep in mind that this process will require you to eject your application and add a lightweight dependancy(development only) [webpack-rtl-plugin](https://www.npmjs.com/package/webpack-rtl-plugin).

The good thing about customizing your build process to implement [webpack-rtl-plugin](https://www.npmjs.com/package/webpack-rtl-plugin) is that this plugin will on the fly generates a different CSS file as soon as you make any CSS changes while running the application in dev mode, and also while creating deployment build of the application.

Instead of authoring two sets of CSS files, one for each language direction. Now you can author the LTR version and this plugin will automatically create the RTL counterpart for you!

```css
.example {
  display:inline-block;
  padding:5px 10px 15px 20px;
  margin:5px 10px 15px 20px;
  border-width:1px 2px 3px 4px;
  border-style:dotted dashed double solid;
  border-color:red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;
}
```
Will be transformed into:

```css
.example {
  display:inline-block;
  padding:5px 20px 15px 10px;
  margin:5px 20px 15px 10px;
  border-width:1px 4px 3px 2px;
  border-style:dotted solid double dashed;
  border-color:red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;
}
```

In the following screenshot you can see that during build it has generated a file `main.9e32ea2d.chunk.rtl.css` that will have all the CSS that needs to be applied in RTL languages.

![screenshot of generated rtl.css file](https://dev-to-uploads.s3.amazonaws.com/i/rs91yvwg5lbe7rfa8jiy.png)


Oftentimes, ejecting lets you customize build process, but from that point on you have to maintain the configuration and scripts yourself.

You can learn here more about [ejecting your React application](https://create-react-app.dev/docs/available-scripts/#npm-run-eject)

##Let's do it! 

1.Create a new React app with [Create React App](https://create-react-app.dev/) if you are starting from scratch or skip to the second step.

```
npx create-react-app react-rtl 
```

2.CD into your newly created app directory or your own [CRA](https://create-react-app.dev/) app if you already have one.

```
cd react-rtl 
```

3.Now is the time to [eject your app](https://create-react-app.dev/docs/available-scripts/#npm-run-eject).

> Note: this is a one-way operation. Once you eject, you can’t go back!

```
npm run eject
```

4.Add webpack-rtl-plugin and @babel/plugin-transform-react-jsx-source as a dev only dependency.

```
npm install webpack-rtl-plugin @babel/plugin-transform-react-jsx-source --save-dev
```

5.Go to `config/webpack.config.js` to make some configuration changes as follows:

```javascript
// First you need to import the plugin, make sure the plugin is already installed.
const WebpackRTLPlugin = require('webpack-rtl-plugin')

// ...

module: { ... }
plugins: [
   // ...,
   // Put this inside plugins array to use the plugin
   new WebpackRTLPlugin({
        diffOnly: true,
        minify: true
      })
    ].filter(Boolean),
].filter(Boolean),
// ...

```

On this stage, if you run yarn build and look up build/static/css folder, you should hopefully see additional `.rtl.css` file that contains your rtl styles. 

Now we need to tell webpack to use MiniCssExtractPlugin.loader for development as well so it will serve styles through link tags instead of inline styles:

```javascript
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    // isEnvDevelopment && require.resolve('style-loader'), comment-out above line and add the below one 
// to enable MiniCssExtractPlugin loader for dev mode.
      isEnvDevelopment && {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '/',
          reloadAll: true
        }
      },
```

Also you need to add `MiniCssExtractPlugin` configs in `config/webpack.config.js`

```javascript
module: { ... }
plugins: [
   // ...,

   // isEnvProduction &&  comment-out this line so that MiniCssExtractPlugin 
   // could be enabled for dev mode.
   new MiniCssExtractPlugin({
     // Options similar to the same options in webpackOptions.output
     // both options are optional
     filename: 'static/css/[name].[contenthash:8].css',
     chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
   }),

   // ...
].filter(Boolean),

```

That's it, our build process is customized to have RTL styled CSS file automatically generated as soon as we make any changes in CSS.

Now to change the layout to RTL, we just need to programmatically include `.rtl.css` file inside `body` of the HTML so that it could override the styles of our main CSS file.

You can see the below the how it should look once included within `body` of the HTML.


![screenshot of React app in element inspect mode in chrome browser](https://dev-to-uploads.s3.amazonaws.com/i/g3eklablo5h7j5h4of2a.png)


The following is the screenshot of the demo [Create React App](https://create-react-app.dev/) where you can see how the layout flips in RTL mode.

<a name="chapter-4"></a>
###Do you think you are missing some steps?
You can follow the source code of the demo application which I have already made available with all the steps, I guess it will help you.

{% github redraushan/reactjs-rtl-support no-readme %}

###Screenshot of the running demo application###

![screenshot of the demo react app configured with RTL](https://dev-to-uploads.s3.amazonaws.com/i/o576crv2lhu4w54xxzen.gif)





If you find the article informative, please don't forget to follow 🙈​

Happy coding 😍​

<a name="chapter-5"></a>
###What's next?


If you talk optimization and walk optimization, memoization is one of the basic concepts that you must add in your skillsets. Moreover you will also learn how you can easily memoize your React components.
{% post https://dev.to/redraushan/memoizing-react-components-2km7 %}

Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.
{% post https://dev.to/redraushan/accessibility-mantras-for-web-developers-2m76 %}

Learn how code splitting is a thing that you have been missing.
{% post https://dev.to/redraushan/route-based-code-splitting-in-reactjs-28ah %}

Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.
{% post https://dev.to/redraushan/javascript-optional-chaining-nullish-coalescing-48o5 %}