Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $9
Get for 99$ 
React RTL version setup - updated
- Install webpack-rtl-plugin and remove-files-webpack-plugin using command: npm install --save-dev webpack-rtl-plugin remove-files-webpack-plugin
- Copy the webpack configuration from this gist and paste it into rtl.config.js in the demo root folder.
- Execute the command yarn webpack --config=rtl.config.js --mode development. This command will execute the webpack configuration to build styles and output them to the assets/rtl folder.
- In file src/index.tsx, replace the LRT style import with RTL style import from assets/rtl:
import "./_metronic/assets/sass/style.scss"
toimport "./_metronic/assets/rtl/style.rtl.css" - In the file public/index.html, on HTML tag add
direction="rtl",dir="rtl"andstyleattribute with valuedirection: rtl. - Find and replace the following attributes in the project:
data-kt-menu-placement='bottom-start'=>data-kt-menu-placement='bottom-end'data-kt-menu-placement='right-start'=>data-kt-menu-placement='left-start'
- In the file src/_metronic/layout/components/header/MenuInnerWithSub.tsx, add the type
'left-start'to the'menuPlacement'property:menuPlacement?: 'right-start' | 'bottom-start' | 'left-start'. - In the file src/_metronic/layout/components/header/MenuInner.tsx, update all occurrences of
'right-start'to'left-start'.
Replies (3)
Thanks for the info.. If I am using rtl and ltr languages in one project. How can I keep both css files. then based on the selected language the ltr or rtl is loaded with the changes you explained above.
I would appreciate your help on this.
Thanks,
Abdullah
Hi Abdullah,
Unfortunately, dynamic direction switching is currently not supported by Metronic SPA versions.
The only way to change the direction dynamically in our React version is by updating the link href of the main style file. To achieve this, follow the steps below:
- Generate RTL and LTR CSS style files using our HTML version.
To generate styles, refer to our gulp build and rtl version setup docs. - Copy the generated style.bundle.css and style.bundle.rtl.css files to public folder in your React app.
- In the public/index.html file, add link tag with default direction styles as shown in this gist file.
- Remove the style import line below from src/index.tsx:
import "./_metronic/assets/sass/style.scss" - To switch the direction, you just need to change the link href from style.bundle.css to style.bundle.rtl.css.
You can reuse switch functions from this gist.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Appreciate your help.
Thanks,
Abdullah
