1. What is RTL?
2. Why your application should have support for RTL?
3. How to make your React apps RTL ready?
4. Demo source code with all the steps done.
5. What's next?
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 is the most widespread RTL writing system in modern times.
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 - 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.
Image source: https://www.tajawal.ae/
How to make your React apps RTL ready?
The below steps are for your apps that you have created with Create React App. Also keep in mind that this process will require you to eject your application and add a lightweight dependancy(development only) webpack-rtl-plugin.
The good thing about customizing your build process to implement 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!
.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:
.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.
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
Let's do it!
1.Create a new React app with Create React App 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 app if you already have one.
cd react-rtl
3.Now is the time to eject your app.
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:
// 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:
// 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
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.
The following is the screenshot of the demo Create React App where you can see how the layout flips in RTL mode.
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.
redraushan
/
reactjs-rtl-support
This is the ejected version of create-react-app with webpack-rtl-plugin configured to work with dev mode as well as prod build.
Screenshot of the running demo application
If you find the article informative, please don't forget to follow πβ
Happy coding πβ
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.
Learn some of the best practices in web accessibility that will help your web content or web application reach out to a broader audience.
Learn how code splitting is a thing that you have been missing.
Find out how Optional chaining and Nullish coalescing can make your code look more clean and readable.
Top comments (0)